CSS テキスト装飾

CSS テキスト装飾 (Text Decoration) は CSS のモジュールの一つで、下線、テキストの影、圏点など、テキスト装飾に関連する機能を定義します。





.under {
  text-decoration: underline red;

.over {
  text-decoration: wavy overline lime;

.line {
  text-decoration: line-through;

.plain {
  text-decoration: none;

.underover {
  text-decoration: dashed underline overline;

.thick {
  text-decoration: solid underline purple 4px;

.blink {
  text-decoration: blink;
<p class="under">This text has a line underneath it.</p>
<p class="over">This text has a line over it.</p>
<p class="line">This text has a line going through it.</p>
<p>This <a class="plain" href="#">link will not be underlined</a>,
    as links generally are by default. Be careful when removing
    the text decoration on anchors since users often depend on
    the underline to denote hyperlinks.</p>
<p class="underover">This text has lines above <em>and</em> below it.</p>
<p class="thick">This text has a really thick purple underline in supporting browsers.</p>
<p class="blink">This text might blink for you,
    depending on the browser you use.</p>


仕様書 状態 備考
CSS Text Decoration Module Level 4 草案
CSS Text Decoration Module Level 3 勧告候補
CSS Level 2 (Revision 1) 勧告
CSS Level 1 勧告 初回定義