CSS text-decoration-line 属性

定義と使用法

text-decoration-line 属性は、使用するテキストの装飾の種類（下線、上線、透かし線）を設定します。

ヒント：同時に text-decoration 属性も参照してください。これは text-decoration-line、text-decoration-style そして text-decoration-color の短縮属性です。

注記：複数の値を組み合わせることができます。例えば、underline と overline を組み合わせると、テキストの上下に同時に線が表示されます。

参照してください：

CSS チュートリアル：CSS 文本

HTML DOM リファレンスマニュアル：textDecorationLine 属性

例

異なる text-decoration 線の種類を設定します：

div.a {
  text-decoration-line: overline;
}
div.b {
  text-decoration-line: underline;
}
div.c {
  text-decoration-line: line-through;
}
div.d {
  text-decoration-line: overline underline;
}

自分で試してみる

CSS 文法

text-decoration-line: none|underline|overline|line-through|initial|inherit;

属性値

値 説明
none デフォルト値。text-decoration に線がないことを規定。
underline テキストの下に線を表示する規定。
overline テキストの上に線を表示する規定。
line-through 横に横切るテキストの線を表示する規定。
initial この属性をデフォルト値に設定します。参照してください： initial。
inherit この属性は親要素から継承されます。参照してください： inherit。

技術的詳細

デフォルト値： none
継承： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.textDecorationLine="overline"

ブラウザのサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが記載されています。

数字には -webkit- または -moz- が付いている場合は、プレフィックスを使用する最初のバージョンを使用していることを示します。

Chrome IE / Edge Firefox Safari Opera
57.0 79.0 36.0
6.0 -moz-		 12.1
7.1 -webkit-		 44.0