定義と使い方

text-decoration-colorプロパティは、
テキストに適用されるtext-decoration-lineで指定された装飾線の色を設定します。

このプロパティを使用すると、テキストの色とは別に装飾線の色を自由に指定することができます。

色を明示的に指定しない場合、装飾線の色はデフォルトでテキスト自体の算出された現在の色で表示されます。

基本の例

基本の例text-decoration-color デモボタンをクリックしてみてください！

形式の構文

CSS 
selector {
    text-decoration-color: <color>
}

値

text-decoration-colorプロパティの値
<color> 色の値

構文

CSS 
/* <color>の値 */
text-decoration-color: currentcolor;
text-decoration-color: red;
text-decoration-color: #00a0e9;
text-decoration-color: rgb(255, 255, 128);
text-decoration-color: rgba(255, 255, 128, 0.5);
text-decoration-color: transparent;

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

形式定義

text-decoration-colorプロパティの構文定義
初期値 currentcolor（現在の文字色）
適用要素 すべての要素
継承 いいえ
アニメーション はい

活用例

HTML 
<p>テキストデコレーションの色の値はblueです。</p>
CSS 
p {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: blue;
}
実際の適用例

ブラウザ互換性

text-decoration-colorプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
text-decoration-color 57 79 36 12.1

仕様書

text-decoration-colorプロパティに関する仕様書
仕様書
text-decoration-color CSS Text Decoration Module Level 4
#text-decoration-color-property

参考資料

関連項目