text-decoration-inset で下線を中央から伸ばすホバー

どんな時に使う？

ナビやインラインリンクで、ホバー時に下線が中央から伸びる演出をしたいとき。従来は ::after の scaleX やグラデーション背景で再現していたが、ネイティブの text decoration だけで書ける。

コード／手順

通常時は下線を両端から大きく inset（短く）し、ホバー／キーボードフォーカスで inset を 0 に戻す。transition の対象に text-decoration-inset を指定する。

nav a {
  text-decoration: underline 2px;
  text-underline-offset: 6px;
  text-decoration-inset: 1.5em;
  transition: text-decoration-inset 0.3s ease-out;
}

nav a:hover,
nav a:focus-visible {
  text-decoration-inset: 0;
}

• 正の値は装飾の端を内側へ縮め、負の値は外側へ伸ばす（1値なら左右同じ、2値なら開始側・終了側）。
• 1.5em は目安。リンク文言の長さに合わせて調整する（短すぎるリンクでは初期状態で下線が消えることがある）。
• 色や太さは従来どおり text-decoration-color / text-decoration-thickness（または text-decoration ショートハンド）で指定する。

注意点・対応状況

• 実験的プロパティ（CSS Text Decorations Level 4）。Firefox 146+ で利用可。Safari は Technology Preview、Chrome は未サポート（2026-10 時点）。未対応ブラウザでは常時フル下線、または @supports (text-decoration-inset: 0) でフォールバックする。
• auto 値は隣接する装飾どうしの見た目の連結を防ぐ用途（中国語固有名詞の下線など）で、今回の伸縮アニメとは別用途。
• パーセント指定の対応はブラウザによってまだ不完全な場合がある。長さ単位（em / px）を優先する。

出典

• @sanyampunia · 2026-10-12