CSS: テキストに下線や字消し線を引く text-decoration

テキストに下線や字消し線を引きたい場合は、 text-decorationプロパティを使用します。

リンクを示すアンカータグでは、デフォルトで下線が引かれています。 リンク部分の下線を消したい場合もtext-decorationプロパティを使用します。

text-decorationの値 4種類

概要
overline上線
underline下線
line-through字消し線
none何もしない

text-decoration サンプル

  • 上線のサンプル
  • 下線のサンプル
  • 字消し線のサンプル
  • 何もしない

上線を使用する機会はほぼないと思いますが、 一応機能としてはあります。

HTML・CSS
<ul>
<li style="text-decoration: overline;">上線のサンプル</li>
<li style="text-decoration: underline;">下線のサンプル</li>
<li style="text-decoration: line-through;">字消し線のサンプル</li>
<li style="text-decoration: none;">何もしない</li>
</ul>

「text-decoration」プロパティでは線の太さを変更することはできませんが、 別の方法で「下線」の太さを変更することは可能です。
CSS: underline(下線)の「色」や「太さ」を指定する