CSS3スタイル虎の巻

text-decoration-line

text-decoration-lineは、テキストの装飾線の位置を指定するCSSです。

解説

テキストの装飾線の位置を指定します。
位置は下線、上線、中央線の３つから選べます。

構文

構文は以下になります。

text-decoration-line: 値;

値

text-decoration-lineには以下の値が指定できます。

値説明
none線を指定しない（初期値）
（例）text-decoration-line:none;
underlineテキストの下に線を引く
（例）text-decoration-line:underline;
overlineテキストの上に線を引く
（例）text-decoration-line:overline;
line-throughテキストの中央に線を引く
（例）text-decoration-line:line-through;

太字の値は初期値です。

サンプル

テキストの下に線を引く


.sample01 {
  text-decoration-line:underline;
}


<div class="sample01">テキストの下に線を引く</div>
テキストの下に線を引く

テキストの上に線を引く


.sample02 {
  text-decoration-line:overline;
}


<div class="sample02">テキストの上に線を引く</div>
テキストの上に線を引く

テキストの中央に線を引く


.sample03 {
  text-decoration-line:line-through;
}


<div class="sample03">テキストの中央に線を引く</div>
テキストの中央に線を引く

備考

  • none（線なし）がデフォルト値なので、線不要の場合はtext-decoration-lineを明示的に指定する必要はありません。

関連項目