CSS Reference

text-underline-offset

下線の本来の位置からのオフセット距離を指定する

text-underline-offset プロパティは、テキストの下線の本来の位置からのオフセット距離を指定します。つまり、下線がテキストの基準位置（ゼロポジション）からどれだけ離れて描画されるかを指定できます。オフセットの値が正の場合は、テキストから外側、つまり離れる方向に、負の場合は内側、つまり近づく方向に下線の位置が移動します。

なお、text-underline-offset プロパティは text-decoration 一括指定プロパティでの指定はできず、個別に指定する必要があります。

指定できる値は下記の通りです。

auto ユーザエージェントが適切な下線のオフセットを選択します。ただし、text-underline-position の計算された値が from-font で、フォントから適切なメトリック（基準となる数値）を取得できる場合、そのオフセットはゼロ（下線がテキストの基準位置と重なる）になります。
<length> 下線のオフセットを<length> 値で指定します。単位（px、em、pt など）を使用して下線をどれだけずらすかを指定できますが、px など、フォントサイズに依存しない固定値を使用するとフォントサイズが変更されたときに下線が文字と重なるなど問題が起こる可能性がありますので注意しましょう。
<percentage> 下線のオフセットを 1em に対する割合として指定します。例えば、50% と指定すれば、1em の半分に相当する位置に下線が描画されます。

text-underline-offsetの仕様

初期値
  • auto
対象となる要素
  • すべての要素
継承
  • あり

text-underline-offsetのサンプルソース

text-underline-offset: auto;
text-underline-offset: 0.1em;
text-underline-offset: 20%;

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome