CSS テキスト装飾

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">このテキストには下付近に 1 本の線があります。</p>
<p class="over">このテキストの上に線があります。</p>
<p class="line">このテキストには取り消し線があります。</p>
<p>この<a class="plain" href="#">リンクには下線が引かれていません</a>が、リンクは一般的には既定で下線があります。ユーザーはハイパーリンクを示すアンダーラインを頼りにしていることが多いので、アンカーの文字装飾を削除する場合は注意が必要です。</p>
<p class="underover">このテキストには上<em></em>下に線があります。</p>
<p class="thick">対応しているブラウザーでは、このテキストは実に太い紫色の下線があります。</p>
<p class="blink">使用しているブラウザーによっては、このテキストは点滅しているかもしれません。</p>

仕様書

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