概要
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>仕様書