【CSS】ホバー時のアンダーライン(下線)エフェクト・アニメーションのサンプルまとめ

実案件で頻出するナビゲーションなどのリンクホバー時に作動するエフェクト・アニメーションを備忘録としてまとめます。

左から右に下線が流れ、ホバーアウトで左に戻る

See the Pen left to right by nkmr (@nkmr_whoo) on CodePen.

ホバーするとアンダーラインが左から右に引かれ、ホバーアウトすると左に戻っていくタイプです。

左から右に流れ、ホバーアウトで右に消える

See the Pen left to right 2 by nkmr (@nkmr_whoo) on CodePen.

ホバーするとアンダーラインが左から右に引かれ、ホバーアウトすると右に消えていくタイプです。

中央から横幅100%に広がり、ホバーアウトで中央に戻る

See the Pen center to 100% by nkmr (@nkmr_whoo) on CodePen.

ホバーするとアンダーラインが中央からテキストの横幅100%まで広がり、ホバーアウトすると中央に戻るタイプです。

まとめ

今後も頻出するパターンを発見したら追記していきます。

CSS設計を学びたいならダントツで分かりやすくてオススメ▼