text-decoration-line

概要

text-decoration-line CSS プロパティは、要素に対してどのような種類の線による装飾を追加するかを設定します。

下線 (underline) 装飾はテキストの下に、上線 (overline) 装飾はテキストの上に、取り消し線 (line-through) はテキストの中央に配置されます。

構文

/* Keyword values */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: underline overline;                /* 2 つの装飾線 */
text-decoration-line: overline underline line-through;   /* 複数の装飾線 */

/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

none、またはホワイトスペースで区切られた 1 つ以上の値を指定できます:

none
テキストの装飾を行いません。
underline
テキストの各行に下線を引きます。
overline
テキストの各行の上部に線を引きます。
line-through
テキストの各行の中央を貫く線を引きます。
blink
テキストは点滅します(表示と非表示を交互に繰り返します)。準拠ユーザーエージェントはテキストを点滅させないかもしれません。この値は非推奨であり、CSS アニメーションが好まれます。
-moz-anchor-decoration
テキストはアンカーとして装飾されます。Web コンテンツでの使用には適していません。

形式文法

none | [ underline || overline || line-through || blink ]

HTML

<p>Here's some text with wavy red underline!</p>

CSS

p { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

仕様

仕様書 状況 備考
CSS Text Decoration Level 3
The definition of 'text-decoration-line' in that specification.
勧告候補 初期定義。text-decoration プロパティは以前はショートハンドではありませんでした。

ブラウザ互換性

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 未サポート 6.0 (6.0) - 39.0 (39.0) -moz
36.0 (36.0) プリフィックスなし
未サポート 未サポート 7.1 -webkit
blink 未サポート 26.0 (26.0) [1] 未サポート 未サポート ?
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 未実装 (参照 WebKit bug 90959) 6.0 (6.0) - 39.0 (39.0) -moz
36.0 (36.0) プリフィックスなし
未サポート 未サポート 8 -webkit
blink 未サポート 未サポート 26.0 (26.0) [1] 未サポート 未サポート ?

[1] この値は有効とされていますが、仕様でブラウザがこの値を無視することを許可しており、点滅はしません。

関連情報

ドキュメントのタグと貢献者

Contributors to this page: mitsuba-clover, ethertank, sosleepy, yyss
最終更新者: mitsuba-clover,