Corredor

ウェブ、プログラミングの勉強メモ。

リンクホバー時に下線を引かせる CSS アニメーション

リンク文字列にマウスをホバーさせると、下線が左から右にニョキ~っとアニメーションで出てくる CSS アニメーションのサンプル。使っているのは CSS のみ。

See the Pen adRXEV by Neos21 (@Neos21) on CodePen.

ソースは上記 CodePen よりご覧ください。

top:1.25em; の部分で下線の垂直位置を調整しているが、周りのスタイル指定によってはちょっとズレるので、各自の環境で調整してほしい。調整要らなくする方法ないかな…。

勉強しながら作った初の CSS アニメーションなので、おかしなところとかあったら教えてください。

あと、CodePen 初使用。貼り付け方はこんな感じで良いのかな?