概要
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>