We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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 にも適用されます。
継承不可
メディアvisual
計算値計算された色
アニメーションの種類
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応57 ?

36

6 — 39 -moz-

なし44 あり -webkit-
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5757 ?

36

6 — 39 -moz-

448 -webkit- 7.0

関連情報

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

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