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

投稿: 2025年12月10日
最終更新: 2025年12月10日

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

Firefox 146 release notes for developers(developer.mozilla.org)
text-decoration-inset の仕様（CSS Text Decoration Module Level 4; Editor’s Draft）(drafts.csswg.org)

テキスト装飾（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-* 系はときどきこういった変更がありますね。

ちなみに仕様にもあるとおり % 単位は指定できません。これが認められると「マウスオーバーで下線長さを 0% → 100% へアニメーションする」といった表現が疑似要素を使わずに実現できるのですが、残念ながらそのようなことはできないようです。このあたりの事情は初期案である [css-text-decor] Feature request - add a property text-decoration-length that modifies the length of the underline · Issue #4557 · w3c/csswg-drafts で議論されていました。