プロパティ text-decoration-line

プロパティ text-decoration-line は、テキストの装飾線の位置を指定します。このプロパティは、 text-decoration-style プロパティと text-decoration-color プロパティと組み合わせて使用する必要があります。これらのプロパティは、 text-decoration プロパティの機能を拡張する、より高度な代替手段です。

構文

cssセレクタ {
  text-decoration-line: underline | line-through | overline | none;
}

値

値	説明
`underline`	下線付きのテキストを作成します。
`line-through`	打ち消し線付きのテキストを作成します。
`overline`	テキストの上に線を引きます。
`none`	下線付き要素の下線を取り消します。リンクはデフォルトで下線が引かれるため、主にリンクに使用されます。

デフォルト値: none。リンクのデフォルト値: underline。

例

テキストを赤い線で打ち消してみましょう:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-line: line-through;
}

Результат: