【CSS】ホバー時のアンダーラインアニメーションサンプル

Webデザインでよく使うアンダーライン（下線）アニメーションのサンプルです。
ナビゲーションなどによく使われている使用頻度の高いもの３パターンになります。

左からフェードインする下線

hoverすると左から右へアンダーラインが引かれます。カーソルを離すと左へ戻ります。

See the Pen 左からフェードインする下線 by m-akagi (@kanna999-) on CodePen.

下から上へフェードインする下線

hoverすると下から上へアンダーラインがフェードインします。カーソルを離すと下に戻ります。

See the Pen 下から上へフェードインする下線 by m-akagi (@kanna999-) on CodePen.

中央から左右に伸びる下線

hoverすると中央から左右に線が伸びます。カーソルを外すと中央に戻ります。

See the Pen 中央から左右に伸びる下線 by m-akagi (@kanna999-) on CodePen.