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リンク
- https://developer.mozilla.org/ja/docs/Web/CSS/text-decoration-thickness
- https://drafts.csswg.org/css-text-decor-4/#text-decoration-thickness-property
Copyright (C) 2022 杜甫々
初版：2022年7月31日、最終更新：2022年7月31日
https://www.tohoho-web.com/css/prop/text-decoration-thickness.htm