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 のプロパティで、要素内のテキストに用いられる装飾線、例えば取り消し線、下線、上線の太さを設定します。

試してみましょう

構文

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: 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

html
<p class="thin">赤い 1px の下線を引いたテキストです。</p>
<p class="thick">赤い 5px の下線を引いたテキストです。</p>
<p class="shorthand">これは同等の一括指定を使用しています。</p>

CSS

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

関連情報