CSS - text-decoration-thickness

概要

属性名 text-decoration-thickness
値 auto | from-font | <length> | <percentage>
初期値 auto
適用可能要素すべての要素
継承なし
サポートhttps://caniuse.com/?search=text-decoration-thickness

説明

テキストの装飾線 (上線、下線、打消し線) の太さを指定します。text-decoration では指定することができません。

値説明
autoブラウザのデフォルトの太さで描画します。
from-fontフォントに従った太さで描画します。
<length>太さを 3px などの長さで指定します。
<percentage>1em を 100% とするパーセンテージで指定します。

使用例

CSS
.td {
  text-decoration-line: underline;
  text-decoration-color: red;
  font-size: 18pt;
}
.auto {
  text-decoration-thickness: auto;
}
.from-font {
  text-decoration-thickness: from-font;
}
.length {
  text-decoration-thickness: 5px;
}
.percentage {
  text-decoration-thickness: 30%;
}
HTML
<span class="td auto">自動</span>
<span class="td from-font">フォント(通常)</span>
<span class="td from-font"><b>フォント(太字)</b></span>
<span class="td length">太さ指定</span>
<span class="td percentage">パーセント指定</span>
表示
自動 フォント(通常) フォント(太字) 太さ指定 パーセント指定

関連項目

text-decoration

リンク

Copyright (C) 2022 杜甫々
初版：2022年7月31日、最終更新：2022年7月31日
https://www.tohoho-web.com/css/prop/text-decoration-thickness.htm