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 2020年11月.
* 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 などの他の装飾線には影響しません。
構文
/* 単一のキーワード */ 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 のデモ
<p class="one-line">こちらはテキストと、オフセットさせた赤い下線です。</p> <br /> <p class="two-lines"> このテキストには、上線と下線の両方があります。下線のみがオフセットされています。 </p> 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 |