下線スライドリンク
ホバーで下線が右から消えて左から伸びる。テキストリンクの上品な定番演出。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- 本文中・ナビのテキストリンク
- 上品に反応を返したいリンク
- 下線を常時出したくないデザイン
- 避ける場面
- 本文中で下線が無いとリンクと分からない場所
- focus で下線が出ない状態のまま使う
- タップでトグルする挙動が遷移と衝突するリンク
- 構成要素
- リンク
- リンク文字
- 下線
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でリンクへ・Enter で移動（a 標準）。focus-visible で下線が伸び輪郭も出る。タップは下線をトグル
- 支援技術
text-decoration を消す代わりに、focus-visible でも下線と輪郭を出す。色（藍）と太字で本文中でもリンクと分かる。reduced-motion では下線が即時に出る
- 動き
下線 scaleX 0→1 を 0.3s ease。起点を右→左に切り替え「右へ消えて左から伸びる」。reduced-motion では即時
デザインの要点
- transform-origin を hover 時は left、離脱時は right に切り替える。片方に固定すると「伸びた側へ縮む」不自然な戻りになる
- 下線は ::after の 2px を scaleX で伸ばす。text-decoration や border-bottom はアニメーションできない
- text-decoration:none にするなら、色＋太字で本文と区別し、focus-visible では下線を出す。手がかりが hover だけのリンクは本文に埋もれる
- 当たり判定は上下 3px の padding で 24px 以上にする。16px の一行リンクは指で押しにくい
コード（コピーして使えます）
<a href="#" class="ul-link">ホバーで下線が伸びるリンク</a>