text-decoration-thickness
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
text-decoration-thickness
は CSS のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。
試してみましょう
構文
/* 単独のキーワード */
text-decoration-thickness: auto;
text-decoration-thickness: from-font;
/* 長さ */
text-decoration-thickness: 0.1em;
text-decoration-thickness: 3px;
/* パーセント値 */
text-decoration-thickness: 10%;
/* グローバル値 */
text-decoration-thickness: inherit;
text-decoration-thickness: initial;
text-decoration-thickness: revert;
text-decoration-thickness: revert-layer;
text-decoration-thickness: unset;
値
auto
-
ブラウザーがテキスト装飾線の適切な太さを選択します。
from-font
-
フォントファイルに推奨する太さの情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、
auto
が設定されているのと同様に動作し、ブラウザーが適切な太さを選択します。 <length>
-
テキスト装飾線の太さを
<length>
として指定し、フォントファイルの推奨値やブラウザーの既定値を無視します。 <percentage>
-
テキスト装飾線の太さを現在のフォントの 1em に対する
<percentage>
で指定します。パーセント値は相対値として継承されるので、フォントが変わるとそれに合わせて変わります。ブラウザーは最小でも 1 デバイスピクセルを使用しなければなりません。このプロパティを適用した場合、フォントの大きさが異なる子要素があっても、適用されたボックス全体で太さが一定になります。
公式定義
初期値 | auto |
---|---|
適用対象 | すべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | なし |
パーセント値 | 要素自身のフォントサイズに対する相対値 |
計算値 | 指定通り |
アニメーションの種類 | 計算値の型による |
形式文法
text-decoration-thickness =
auto |
from-font |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
例
様々な太さ
HTML
<p class="thin">赤い 1px の下線を引いたテキストです。</p>
<p class="thick">赤い 5px の下線を引いたテキストです。</p>
<p class="shorthand">これは同等の一括指定を使用しています。</p>
CSS
.thin {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 1px;
}
.thick {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 5px;
}
.shorthand {
text-decoration: underline solid red 5px;
}
結果
仕様書
Specification |
---|
CSS Text Decoration Module Level 4 # text-decoration-width-property |
メモ: このプロパティは text-decoration-width
と呼ばれていましたが、 2019 年に text-decoration-thickness
に更新されました。
ブラウザーの互換性
BCD tables only load in the browser