【CSS】text-decoration-thickness - テキストの装飾（線の太さ）

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

検証環境

CSS

macOS

14.1

text-decoration-thickness

text-decoration-thicknessは“テキストの総称線の太さ”のプロパティです。

基本構文

text-decoration-thickness: 値;

値

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

値	意味
auto	自動調整
from-font	書体の推奨（またはautoと同じ）
数値	数値の太さ

サンプル

自動調整

テキストの装飾線の太さを自動調整するサンプルです。

sample.html

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

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

プレビュー

書体の推奨

テキストの装飾線の太さを書体の推奨に設定するサンプルです。

sample.html

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

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

プレビュー

任意の数値

テキストの装飾線の太さを5pxに設定するサンプルです。

sample.html

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

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

プレビュー