text-underline-offset

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

text-underline-offsettext-decoration の一括指定の一部ではありません。一つの要素が複数の text-decoration による線を持つため、 text-underline-offset は下線のみに影響し、 overlineline-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 の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
text-underline-offsetChrome 未対応 なし
補足
未対応 なし
補足
補足 See Chrome Platform Status entry for text-decoration-thickness, text-underline-offset and from-font keyword for text-underline-position.
Edge 未対応 なしFirefox 完全対応 70
完全対応 70
完全対応 69
無効
無効 From version 69: this feature is behind the layout.css.text-underline-offset.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 12.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 12.2Samsung Internet Android 未対応 なし
percentage valuesChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 74IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報