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（下線）の「色」や「太さ」を指定する