定義と使い方

text-decoration-thicknessプロパティは、
テキストに適用されるtext-decoration-lineで指定された線の装飾の太さ（太さ）を設定します。

ご注意ください！
このプロパティは、以前はtext-decoration-widthと呼ばれていましたが、2019年にtext-decoration-thicknessに更新されました。

基本の例

CSSライブデモ：text-decoration-thickness デモボタンをクリックしてみてください！

形式の構文

CSS 
selector {
    text-decoration-thickness: auto | from-font | <length-percentage>
}

値

text-decoration-thicknessプロパティは、要素にtext-decoration-lineプロパティで指定されたunderline、overline、line-throughなどの線の太さを設定します。各値の意味は以下のとおりです

text-decoration-thicknessプロパティ値
auto ブラウザーがテキストの装飾線に対して適切な太さを自動的に選択する値です。
from-font フォントファイルに推奨される太さの情報が含まれている場合はその値が使用され、含まれていない場合はブラウザーが適切な太さを自動的に選択する値を示します。
<length> テキストの装飾線の太さを長さの値で指定します。
<percentage> テキストの装飾線の太さを1emに対するパーセンテージで指定します。

構文

CSS 
/* 単一キーワード値 */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;

/* 長さの値 */
text-decoration-thickness: 0.12em;
text-decoration-thickness: 5px;

/* パーセンテージ値 */
text-decoration-thickness: 12%;

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

形式定義

text-decoration-thicknessプロパティの形式定義
初期値 auto
適用要素 すべての要素
継承 いいえ
アニメーション はい

一部のブラウザーではアニメーションがサポートされていません。

活用例

HTML 
<p>テキストデコレーションの太さは5pxです。</p>
CSS 
p {
    text-decoration-line: underline;
    text-decoration-color: red;
    text-decoration-style: solid;
    text-decoration-thickness: 5px;
}
text-decoration-colorプロパティ
実際の適用例

ブラウザ互換性

text-decoration-thicknessプロパティのブラウザ互換性
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
text-decoration-thickness 89 89 70 12.1

仕様書

text-decoration-thicknessプロパティに関する仕様書
仕様書
text-decoration-thickness CSS Text Decoration Module Level 4
#text-decoration-width-property

参考資料

関連項目