text-underline-offset

文字へ引いた下線を、本来の位置から近づけたり離したりするプロパティ。文字・線の形・色・太さは固定したまま、下線との距離だけを切り替えて違いを確かめます。

CSSの`text-underline-offset`とは？

文字と下線の距離をauto・負の長さ・em・px・割合で切り替えながら、初期値、継承、使い方を初学者向けに解説します。

遊んでみよう

見てわかるCSS

文字色・線の形・色・太さは固定。下線との距離だけが変わります

auto：ブラウザーが適切な距離を選びます

CSS

.element text-underline-offset: auto;

値のパターン

下線との距離 text-underline-offset

text-underline-offsetの構成要素

01auto

ブラウザーへ距離を任せる

ブラウザーが書体に合う下線の位置を選びます。text-underline-offsetの初期値です。

02<length>

長さで上下へ移動する

0.12em・4pxなどの長さで距離を指定します。負の値では下線が文字へ近づきます。

03<percentage>

文字サイズを基準にする

20%のように、要素自身のフォントサイズ1emに対する割合で距離を指定します。

04underline

下線だけへ適用する

移動するのはunderlineだけです。overlineやline-throughの位置は変わりません。

早見表

初期値はautoです。下線が表示されている要素へ、autoまたは長さ・割合を1つ指定します。

01autoブラウザーが適切な距離を選ぶ初期値

02-0.08em下線を文字へ近づける負の相対長

030下線を本来の位置から移動しない距離なし

040.12em文字サイズに合わせて離す推奨しやすい単位

056px6ピクセル離す固定長

0625%1emの25%だけ離す割合

よくある使い方

本文リンクの下線を文字から離す

emを使い、文字サイズが変わっても読みやすい距離を保ちながらリンクの下線を見せます。

a { text-decoration-line: underline; text-underline-offset: 0.14em; }

見出しの下線へ余白をつくる

太い下線が文字へ重ならないよう、線の太さと距離を一緒に調整します。

h2 { text-decoration: underline 4px #7258e8; text-underline-offset: 0.2em; }

親要素から下線の距離を引き継ぐ

継承されるため、まとまりの親へ割合を指定すると子要素も同じ相対値を引き継ぎます。

.nav { text-underline-offset: 20%; } .nav a { text-decoration-line: underline; }

ポイント

下線を表示してから、文字との間隔を整える。

text-underline-offsetは下線の距離だけを指定するため、text-decoration-lineがunderlineでなければ変化が見えません。初期値はautoで、すべての要素と::first-letter・::first-lineに適用でき、子要素へ継承されます。長さは負の値も使え、正の値では通常は文字から離れ、負の値では近づきます。割合は要素自身のフォントサイズ1emを基準にし、相対値のまま継承されます。値は計算値の型に応じてアニメーションできます。このプロパティはtext-decoration一括指定の構成要素ではなく、underlineだけに作用するため、overlineやline-throughは移動しません。また、祖先が引いた下線の位置を子要素側の指定で変えることはできません。下線を離しすぎると次の行へ近づくので、line-height、文字サイズ、線の太さ、複数行での見え方も確認します。