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

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

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

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

あと、CodePen 初使用。貼り付け方はこんな感じで良いのかな？ (2021-12-20 : 2016年の公開当時は CodePen.io というサービスでコードを共有・貼り付けていました)