【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.