テキスト装飾線のタイプを設定する

CSS - text-decoration-line

概要

CSSプロパティ｢text-decoration-line｣は、テキストに対してどのような線の装飾を行うのかを指定することができます。例えば下線、上線、取り消し線などです。

またこのプロパティの他、text-decoration-color、text-decoration-style があり、それらをまとめて指定するショートハンドプロパティとして text-decoration があります。

<p>今日の天候は<span>晴れ</span>です</p>
<style>
span {
  text-decoration-line: line-through;
}
</style>

取りうる値

適用させたい線の種類を用意されているキーワードから指定します。またこのキーワードは複数指定することも可能です。

{ text-decoration-line: キーワード キーワード2 ..; }
値説明
none装飾なし
line-throughテキストに打ち消し線
underlineテキストに下線
overlineテキストに上線

使用例

複数指定して表示例です。実装するうえでこのようなケースは少ないと思いますが、指定が可能ということを確認しておきましょう。

<p>今日の天候は<span class="red line-through">晴れ</span>です</p>
<style>
.red {
  text-decoration-color: red;
}
.line-through {
  text-decoration-line: underline line-through overline;
}
</style>

仕様書

 

関連CSSプロパティ