CSStext-decoration-color プロパティは、 text-decoration-line で指定された文字列に対する装飾、つまり下線、上線、打消し線、それに (例えば) スペルミスのコンテンツを示すのによく使われるような波線などの色を設定します。設定された色は、プロパティ値のスコープにあるすべての装飾戦に適用されます。

CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に (text-decoration-line プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。

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

構文

/* <color> 値 */
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

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

<color>
装飾線の色です。

形式文法

<color>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

<p>This paragraph has <s>some erroneous text</s>
    inside it that I want to call attention to.</p>
p { 
  text-decoration-line: underline;
  text-decoration-color: cyan;
}

s {
  text-decoration-line: line-through;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

仕様策定状況

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

初期値currentcolor
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディア視覚
計算値色の計算値
アニメーションの種類
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

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

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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