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.

* Some parts of this feature may have varying levels of support.

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

試してみましょう

構文

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

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 に更新されました。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-thickness
auto
from-font
percentage values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報