CSS text-decoration-thickness 属性

コース推薦：

定義と使用法

text-decoration-thickness属性は装飾線の太さを指定します。

また、参照してください：CSSリファレンスマニュアル：

text-decoration属性CSS 文字

CSSチュートリアル：

例

<h1>、<h2>、<h3>、<h4>要素に異なる太さの装飾線を設定します：
  text-decoration: underline;
  text-decoration-thickness: auto;
}
h2 {
  text-decoration: underline;
  text-decoration-thickness: 5px;
}
h3 {
  text-decoration: underline;
  text-decoration-thickness: 50%;
}
/* 略記属性の使用 */
h4 {
  text-decoration: underline solid red 50%;
}

実際に試してみてください

CSS文法

text-decoration-thickness: auto|from-font|length/percentage|initial|inherit;

属性値

値 説明
auto ブラウザが装飾線の太さを選択します。
from-font フォントファイルが推奨される太さに関する情報を含んでいる場合、この値を使用してください。そうでない場合、autoが表示されます。
length/percentage 太さは長さ値またはパーセンテージ値で指定されます。
initial この属性をデフォルト値に設定します。参照 initial。
inherit 親要素からこの属性を継承します。参照 inherit。

技術的詳細

デフォルト値： auto
継承： いいえ
アニメーション作成： サポートされていません。参照してください：アニメーション関連属性。
バージョン： CSS4
JavaScript文法： object.style.textDecorationThickness="5px"

ブラウザのサポート

この表の数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
89.0 89.0 70.0 12.1 75.0