アニメーション下線リンク
このテキストリンクは、ホバーすると下線が左から右へ伸びていくミニマルな演出です。下線は text-decoration ではなく ::after 疑似要素で描いた高さ 2px の帯で、初期状態は transform:scaleX(0) で横幅ゼロに潰してあります。
解説
このテキストリンクは、ホバーすると下線が左から右へ伸びていくミニマルな演出です。下線は text-decoration ではなく ::after 疑似要素で描いた高さ 2px の帯で、初期状態は transform:scaleX(0) で横幅ゼロに潰してあります。注目したいのは transform-origin の切り替えで、待機時は right（右基点で縮む）、ホバー時は left（左基点で伸びる）に変わります。この基点の入れ替えにより、マウスを乗せると左から右へ伸び、離すと右へ消えていく自然な往復が生まれます。色は currentColor なので文字色に追従します。CSS のみで動作します。
使う場面
- 本文中の「続きを読む」「詳しく見る」などの控えめなリンク
- Apple や Stripe のような上質さを狙うサイトのナビゲーション
- 装飾を抑えたいブログ記事や下層ページのテキスト導線
下線の太さは height、伸びる速さと質感は transition の時間とイージングで調整します。色をリンク色と分けたい場合は ::after の background を currentColor から個別色に変えてください。scaleX による変形はレイアウトを動かさないため軽く、行間が詰まったテキストでも崩れにくいのが利点です。
使用例・適したシーン
- 記事の「もっと読む」リンク
- 外部リソースへのリンク
- フッターナビゲーション
よくある質問
下線が右から消えるのはなぜですか
transform-originを切り替えているためです。待機時はtransform-origin:rightで右を基点に縮み、ホバー時はleftに変わって左から伸びます。この基点の入れ替えが伸びる／消える方向を自然に見せています。
下線の色や太さを変えたいときは
太さは::afterのheight（既定2px）で変えます。色は既定でcurrentColor（文字色に追従）なので、別色にしたい場合は::afterのbackgroundを好きな色に書き換えてください。速さはtransitionの時間で調整できます。