定義と使い方

text-underline-offset プロパティは、text-decoration で設定された下線（underline）の元の位置からの間隔を指定します。

このプロパティを使用すると、下線の基準となる元の位置から間隔を広げたり狭めたりすることができます。

基本例

CSSライブデモ：text-underline-offset デモボタンをクリックしてみてください！

形式構文

CSS 
selector {
    text-underline-offset: 	auto | <length-percentage>
}

値

text-underline-offsetプロパティの値
auto ブラウザが下線の元の位置を基準に、適切な間隔のオフセットを選択します。
length 下線の元の位置を基準に、長さの数値で間隔を指定します。
<percentage> 下線の元の位置を基準に、要素のフォントサイズである 1em に対するパーセンテージで間隔を指定します。

length 値と <percentage> 値が正の数の場合、下線は元の位置を基準にテキストの外側に合わせて間隔が調整され、負の数の場合には内側に合わせて間隔が調整されます。

下線の元の位置の基準

text-underline-offset プロパティは、 text-decoration で設定された下線（underline）の元の位置を基準に間隔を指定します。

ここで言う下線の元の位置の基準とは、text-underline-position プロパティで指定された下線の基準位置のことです。

text-underline-offset プロパティの 0 という値は、この下線の元の位置の基準を意味します。
次の表は、text-underline-position プロパティで指定できる下線の元の位置の基準値です。

text-underline-positionプロパティで指定できる下線の元の位置の基準値
auto ブラウザは独自のアルゴリズムを使用して、アルファベットの基準線（baseline）またはアルファベットの基準線の下に線を配置します。
from-font フォントファイルに推奨される位置に関する情報が含まれている場合は、その値を使用します。フォントファイルにこの情報が含まれていない場合は、ブラウザが適切な位置を選択し、自動的に設定されたかのように動作します。
under 要素のテキスト内容の下端（例えば、下線がアルファベットの g、j、p、q、y のように、文字のベースライン（baseline）より下に突き出る部分の下端）に配置されます。
left 縦書きモードでは下線の基準位置は under と同じになりますが、テキストの左側に配置されます。
横書きモードでは auto 値と同じになります。
right 縦書きモードでは下線の基準位置は under と同じになりますが、テキストの右側に配置されます。
横書きモードでは auto 値と同じになります。

構文

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
適用要素 すべての要素
継承 はい
アニメーション 計算された値

活用例

CSS 
p {
    font-size: 1.3em;
    text-decoration: underline;
    text-underline-position: under;
    text-underline-offset: 0;
}
HTML 
<p>ABCDEF ghijklm あいうえ 12345</p>
実際の適用例 下線の間隔の基準（ゼロ地点）がテキストの下端になります。

ブラウザ互換性

text-underline-offsetプロパティのブラウザ互換性
プロパティと値
デスクトップ Chrome
Chrome
デスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
text-underline-offset 87 87 70 12.1
パーセンテージ（%）値 87 87 74 18.2

仕様書

text-underline-offsetプロパティの仕様
仕様書
text-underline-offset CSS Text Decoration Module Level 4
#underline-offset

参考資料

関連項目