text-underline-offset

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2020.

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

text-underline-offset は CSS のプロパティで、 (text-decoration を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。

試してみましょう

text-underline-offset: auto;

text-underline-offset: 8px;

text-underline-offset: -0.5rem;

<section id="default-example">
  <p id="example-element">And after all we are only ordinary</p>
</section>

p {
  font: 1.5em sans-serif;
  text-decoration-line: underline;
  text-decoration-color: #ff0000;
}

text-underline-offset は text-decoration の一括指定の一部ではありません。一つの要素が複数の text-decoration による線を持つため、 text-underline-offset は下線のみに影響し、 overline や line-through などの他の装飾線には影響しません。

構文

css
/* 単一のキーワード */
text-underline-offset: auto;

/* 長さ */
text-underline-offset: 0.1em;
text-underline-offset: 3px;

/* パーセント値 */
text-underline-offset: 20%;

/* グローバル値 */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

text-underline-offset プロパティは、以下のリストのうち一つの値で指定します。

値

auto

ブラウザーが下線の適切なオフセットを選択します。

<length>

下線のオフセットを <length> で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、 em 単位を使用することを推奨します。

<percentage>

下線のオフセットを、要素のフォントにおける 1 em に対する <percentage> で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。

公式定義

初期値auto
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
パーセント値要素自身のフォントサイズに対する相対値
計算値指定通り
アニメーションの種類計算値の型による

形式文法

text-underline-offset = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

例

text-underline-offset のデモ

html
<p class="one-line">こちらはテキストと、オフセットさせた赤い下線です。</p>
<br />
<p class="two-lines">
  このテキストには、上線と下線の両方があります。下線のみがオフセットされています。
</p>
css
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.two-lines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

仕様書

Specification
CSS Text Decoration Module Level 4
# underline-offset

ブラウザーの互換性

関連情報