text-decoration-line:文字に加えられた装飾線の種類を指定する

初期値 none
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

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

text-decoration-lineは、文字に加えられた装飾線の種類を指定します。既定値では、noneの値が適用されているため装飾線は表示されません。

装飾線の種類は、アンダーライン、オーバーライン、打ち消し線などです。これらは装飾線が引かれる位置を示すものであるため、線の形状を変化させたい場合はtext-decoration-styleを使用して下さい。

文字に対する装飾線の値は、ショートハンド・プロパティのtext-decorationで一括操作できます。

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

none
装飾線を表示させません。これが初期値です。
underline
文字にアンダーラインを引きます。テキストが改行された場合は、各行の下に線が引かれます。
underline
文字にオーバーラインを引きます。テキストが改行された場合は、各行の上に線が引かれます。
line-through
文字に打ち消し線を引きます。テキストが改行された場合は、各行の中央に線が引かれます。
blink(廃止)
文字を点滅させます。HTMLの<blink>要素の代替機能として提案されましたが、現在はanimationでの実装を推奨します。

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

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

CSS
/* キーワード値 */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;

/* 複数のキーワード値 */
text-decoration-line: underline overline;
text-decoration-line: overline underline line-through;

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

text-decoration-lineの実例

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

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

表示確認
CSS
.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;
}
HTML
<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>

text-decoration-lineに関連するCSSプロパティ

テキスト関連
text-align ボックスに含まれる内容の横位置の揃え方を指定する
text-align-last ボックスに含まれる内容の最後の行を揃える位置を指定する
text-combine-upright 一文字分の空間に挿入する文字の組み合わせを指定する
text-decoration 文字の装飾線に関する値を一括で指定する
text-decoration-color 文字に加えられた装飾線の色を指定する
text-decoration-line 文字に加えられた装飾線の種類を指定する
text-decoration-skip-ink 装飾線が文字を通過する祭の処理を指定する
text-decoration-style 文字に加えられた装飾線の形状を指定する
text-decoration-thickness 文字に加えられた装飾線の太さを指定する
text-emphasis テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
text-emphasis-color テキストに付加する圏点、傍点、脇点の色を指定する
text-emphasis-position テキストに付加する圏点、傍点、脇点の位置を指定する
text-emphasis-style テキストに付加する圏点、傍点、脇点の記号を指定する
text-indent テキストの一行目に挿入するインデントの幅を指定する
text-justify テキストの行端揃えに対して均等割り付けの方法を指定する
text-orientation 縦書きモードの文字の向きを指定する
text-overflow 行からテキストが溢れている状態の表現方法を指定する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字・小文字の表記を指定する
text-underline-position 文字の下に引かれる装飾線の位置を指定する