CSStext-decoration-line プロパティは、下線や上線など、要素内の文字列に使われる装飾の種類を設定します。

複数の line-decoration に関するプロパティを一度に設定するときは、代わりに一括指定の text-decoration プロパティを使用したほうが便利かもしれません。

構文

/* 単一のキーワード */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* 複数のキーワード */
text-decoration-line: underline overline;               /* 2つの装飾線 */
text-decoration-line: overline underline line-through;  /* 複数の装飾線 */

/* グローバル値 */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

text-decoration-line プロパティは none または以下のリストにある1つ以上の空白で区切られた値を指定します。

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

形式文法

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

<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

仕様書

仕様書 状態 備考
CSS Text Decoration Module Level 3
text-decoration-line の定義
勧告候補 初回定義。 text-decoration プロパティが複数の関連するプロパティを定義する一括指定になりました。

初期値none
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge ? Firefox 完全対応 36
完全対応 36
未対応 6 — 39
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android 完全対応 36
完全対応 36
未対応 6 — 39
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 8
接頭辞付き
完全対応 8
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
blink
非推奨
Chrome 完全対応 57
補足
完全対応 57
補足
補足 The blink value does not have any effect.
Edge ? Firefox 完全対応 26
補足
完全対応 26
補足
補足 The blink value does not have any effect.
IE 未対応 なしOpera 完全対応 44Safari ? WebView Android 完全対応 57
補足
完全対応 57
補足
補足 The blink value does not have any effect.
Chrome Android 完全対応 57
補足
完全対応 57
補足
補足 The blink value does not have any effect.
Edge Mobile ? Firefox Android 完全対応 26
補足
完全対応 26
補足
補足 The blink value does not have any effect.
Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

  • 複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の text-decoration プロパティを使った方が便利かもしれません。

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

このページの貢献者: mfuji09, teoli, Sebastianz, mitsuba-clover, ethertank, sosleepy, yyss
最終更新者: mfuji09,