text-decoration-color - 文字の装飾に色を付ける

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのtext-decoration-colorは、text-decorationで指定した文字の装飾に、色を付けるためのプロパティです。2016年2月現在、主要なブラウザではFirefox以外で機能しないので、利用しづらいプロパティと言えます。

サンプルコード

text-decoration-colorを指定したサンプルコードです。

div {
	text-decoration: underline ;
	text-decoration-color: #D36015 ;
}

text-decorationにunderlineを指定して付けた下線に、text-decoration-colorで色を付けたデモです。CSSを編集して、どのように変化するのかをお試し下さい。

<div id="element"> <p>文字の装飾はこまめに。</p> </div>

#element { text-decoration: underline ; text-decoration-color: #D36015 ; }

値の指定方法は主に下記の通りです。リンクをクリックするとデモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`text-decoration-color`には、`body`に指定された値(`#D36015`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`$`(装飾なし)が適用される。
color	CSSで許可された方法で、色の指定ができます。Hex(`#D36015`)、RGB(`rgb( 211, 96, 21 )`)、HSL(`hsl( 24, 82%, 46% )`)、KEYWORD(`brown`)など。

2016年7月現在の、ブラウザのサポート状況は次の通りです。