text-decoration-color：文字に加えられた装飾線の色を指定する

text-decoration-colorプロパティの説明

text-decoration-colorは、文字に加えられた装飾線の色を指定します。ここで指定された色は、前景色には使われずに下線、上線、打消し線、スペルミスなどでシステム的に表示される波線などに適用されます。

文字に装飾線を加える場合は、まず初めにtext-decoration-lineで線の種類を指定します。初期値では、これがnoneになっているため、色を変えても表示されません。

文字に対する装飾線の値を一括で指定する場合は、text-decorationを使用して下さい。

text-decoration-colorに指定できる値

<color>

CSSで使用できる色を表すデータ型の値です。使用できる形式は、キーワード、16進数、RBG値、HSL値などがあります。

text-decoration-colorの使い方とサンプル

text-decoration-colorプロパティの構文は以下の通りです。

/* <color>値 */
text-decoration-color: cyan;
text-decoration-color: #f00;
text-decoration-color: #ff0000;
text-decoration-color: rgb(255, 0, 0);
text-decoration-color: rgba(255, 0, 0, 0.5);
text-decoration-color: currentcolor;
text-decoration-color: transparent;

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

text-decoration-colorの実例

それでは実際にtext-decoration-colorプロパティの書き方を見ていきましょう。以下の例は、個別のプロパティで装飾線を加えた時の内容です。これらの値は、ショートハンド・プロパティのtext-decorationでも指定できます。

装飾線の範囲に意味を持たせるには、HTML要素で囲います。打ち消し線に削除や訂正の意味を持たせる場合は<del>や<s>、アンダーラインや波線に強調や注釈の意味を持たせる場合は<u>や<i>を使用します。

.samp_box {
	padding: 1rem;
	background: #eee;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	gap: 1rem;
}
.samp_box > section {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #fff;
}
section > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: .5rem 0 0;
}
.td_1 > p {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: currentcolor;
	text-decoration-thickness: auto;
}
.td_2 > p {
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: blue;
	text-decoration-thickness: 2px;
}
.td_3 > p {
	text-decoration-line: line-through;
	text-decoration-style: double;
	text-decoration-color: #f00;
	text-decoration-thickness: from-font;
}
.td_4 > p {
	text-decoration-line: underline overline;
	text-decoration-style: dotted;
	text-decoration-color: rgba(0, 0, 0, 0.5);
	text-decoration-thickness: 1px;
}

<div class="samp_box">
	<section class="td_1">
		<h2>既定の色や形状</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
	<section class="td_2">
		<h2>波線の強調</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
	<section class="td_3">
		<h2>二重の打ち消し線</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
	<section class="td_4">
		<h2>上下の二箇所を装飾</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
</div>