ホバーで背景色が下から塗られる
リンクテキストにカーソルを乗せると、背景色が 下から上へ塗り上がる ナビ向けの演出です。仕掛けは ::before 疑似要素で、最初は height:0 でリンク下端に潜ませておき、ホバー時に height:100% まで伸ばします。
解説
リンクテキストにカーソルを乗せると、背景色が下から上へ塗り上がるナビ向けの演出です。仕掛けは ::before 疑似要素で、最初は height:0 でリンク下端に潜ませておき、ホバー時に height:100% まで伸ばします。z-index:-1 で文字の背後に置き、親に overflow:hidden を指定してはみ出しを隠すのがポイントです。文字色もホバーで白へ切り替え、塗られた背景の上でも読めるようにしています。
使う場面
- グローバルナビの「ABOUT / SERVICE / CONTACT」リンク
- テキスト主体のメニューやフッターリンク
- 強調したいインラインのテキストリンク
塗りの色は ::before の background、伸びる速さは transition の秒数で調整できます。cubic-bezier によって自然な加減速が付いています。注意点として、塗りが伸びきる前にカーソルが外れても途中から戻る挙動になります。背景色とホバー後の文字色は十分なコントラストを保ち、動きを抑えたい利用者向けに prefers-reduced-motion で塗りを瞬時に切り替える配慮もしておくと親切です。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
塗りの色や上がる速さは変えられますか
変えられます。色は ::before の background、速さは transition の秒数で調整します。文字色はホバー後の背景に対して読めるコントラストを保ってください。
なぜ overflow:hidden が必要なのですか
疑似要素を下から伸ばす際にリンク枠からはみ出すのを隠すためです。親に overflow:hidden を付けることで、背景がきれいにリンク内だけで塗り上がります。