text-underline-offset
は CSS のプロパティで、 (text-decoration
を使用して適用された) 下線のテキスト装飾線の本来の位置からのオフセット距離を設定します。
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: unset;
text-underline-offset
プロパティは、以下のリストのうち一つの値で指定します。
値
auto
- ブラウザーが下線の適切なオフセットを選択します。
<length>
- 下線のオフセットを
length
で指定し、フォントファイルの提案やブラウザーの既定値を上書きします。オフセットがフォントサイズに合わせて変化するように、em
単位を使用することを推奨します。 <percentage>
- 下線のオフセットを、要素のフォントにおける 1 em に対する
<percentage>
で指定します。パーセント値はは相対値として継承されるため、フォントの変化に応じて変化します。このプロパティを適用した場合、オフセットは、フォントサイズや垂直方向の配置が異なる子要素があっても、下線が適用されているボックス全体で一定となります。
形式文法
auto | <length> | <percentage>
例
<p class="oneline">Here's some text with an offset wavy red underline!</p>
<br>
<p class="twolines">This text has lines both above and below it. Only the bottom one is offset.</p>
p {
text-decoration: underline wavy red;
text-underline-offset: 1em;
}
.twolines {
text-decoration-color: purple;
text-decoration-line: underline overline;
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Text Decoration Module Level 4 text-underline-offset の定義 |
草案 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser