Firefox 146 で text-decoration-inset プロパティが実装

投稿 :

最終更新 :

Firefox 146 で text-decoration-inset プロパティがサポートされました。

テキスト装飾（text-decoraion-*）の開始点と終了点を調整できるもので、実際のテキスト長より装飾長さを変えたり、横位置をオフセットしたりすることが可能になります。個人的には <a href> 要素や <del> 要素などが連続した際に、横線のみ間隔を空けることができるようになる点に注目しています。

たとえば次の HTML を表示した場合、これまでは横線が連続して見た目上の区切りが判別できなかったのですが、対応ブラウザでは text-decoration-inset: auto を指定した場合、良い感じに分離されるようになります。

<p><a href="">こんにちは</a><a href="">こんばんは</a></p>
<p><ins>こんにちは</ins><ins>こんばんは</ins></p>
<p><del>こんにちは</del><del>こんばんは</del></p>
サムネイル画像
Firefox 146 の表示。こんにちはとこんばんはの間で下線や取り消し線が途切れている。オリジナル画像

CSS 仕様における初期値は 0、つまり従来どおり横線に間隔が空かない状態なのですが、Firefox は UA スタイルシートのみの状態で間隔が空くので実質的に auto と同じ状態になります。すなわちアップデートにより表示が変わります（あらかじめ auto 以外の値を明示していない限り）。text-decoration-* 系はときどきこういった変更がありますね。

2026年4月21日追記上記の Firefox に関する一文は不正確で、正しくは :any-link, u, s, ins, del, strike のそれぞれが日本語、韓国語、中国語のいずれかである場合のみ UA スタイルシートで text-decoration-inset: auto が設定されています。<abbr title> はなぜか対象外のようです。

ちなみに仕様にもあるとおり % 単位は指定できません。これが認められると「マウスオーバーで下線長さを 0% → 100% へアニメーションする」といった表現が疑似要素を使わずに実現できるのですが、残念ながらそのようなことはできないようです。このあたりの事情は初期案[1]で議論されていました。

2026年4月12日追記4月3日に CSS Working Group にて進展があり、% 単位を取り入れる形で話が進んだようです[2]。また Blink は % 単位を含めての Intent to Prototype が立ちました[3]。

脚注