【CSS】text-decoration-line - テキストの装飾（種類）

CSSのtext-decoration-lineプロパティについて解説します。

検証環境

CSS

macOS

14.1

text-decoration-line

text-decoration-lineは“テキスト装飾の種類”のプロパティです。

text-decoration-line: 値;

複数の値をスペースで区切って指定できます。

text-decoration-line: 値 値 値;

代表的な値は次の通りです。

テキストに下線の装飾を付けるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-decoration-line: underline;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

テキストに上線の装飾を付けるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-decoration-line: overline;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

テキストに中央線の装飾を付けるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-decoration-line: line-through;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー

テキストに上線と下線の装飾を付けるサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    text-decoration-line: underline overline;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー