テキスト装飾線のタイプを設定する

CSS - text-decoration-color

概要

CSSプロパティ「text-decoration-color」は、テキストの下線、上線、取り消し線などの装飾に対して色を指定する際に使用します。またこのプロパティの他、text-decoration-line、text-decoration-style があり、それらをまとめて指定するショートハンドプロパティは text-decoration となります。

<p>今日の天候は<span>晴れ</span>です</p>
<style>
  span {
    text-decoration: underline;
    text-decoration-color: red;
  }
</style>

取りうる値

適用させたい色を指定します。色については color プロパティに詳細が記載しています。

{ text-decoration-color: 色; }
説明
color色を指定します. #000000やrgb(0,0,0)でも指定できます

使用例

使用したい要素で色のみを区別してみました。まとめて記載できるところはまとめ、区別したい箇所を個別で指定してます。

<p>今日の天候は<span class="red">晴れ</span>です</p>
<p>今日の天候は<span class="gray">曇り</span>です</p>
<p>今日の天候は<span class="blue">雨</span>です</p>
<style>
span {
  text-decoration: underline;
}
.red {
  text-decoration-color: red;
}
.gray {
  text-decoration-color: gray;
}
.blue {
  text-decoration-color: blue;
}
</style>

仕様書

関連CSSプロパティ