カーソルホバー時のアンダーラインアニメーション実装【CSS】

WEBデザインに必要なホバー時のアンダーラインをCSSのみで様々な動きを加えました。
カーソルが要素に乗った際に動作します。

実装するためのHTMLとCSSをコピペ出来るようになっていて、カラー変更など自由に出来ます。

ライン【line】

::afterと::beforeでアンダーラインを指定。

下記コードは、下線のあるリンクを作成するためのものです。pタグ内のa要素に対して、リンクのスタイルを指定。

リンクのテキストが中央揃えになり、太字の30pxのフォントサイズが指定されています。また、リンクにマウスオーバーした場合、下線のスタイルが変わるようになっています。

具体的には、リンクの下線が左右に伸びるように設定。そのため、リンクテキストの右側から下線が始まり、左側に移動するようにアニメーションされます。また、マウスオーバーで下線がリンクテキストの幅に広がります。

線の太さ

線の太さはp.sample a:beforeのheight: 4px;の変更で調整出来ます。

:beforeは、CSSの疑似要素（pseudo-element）の一種で、選択された要素の最初の子要素の前に配置される仮想の要素です。例えば、a:beforeとすることで、リンク（a要素）の前に仮想的な要素を作成し、その要素にスタイルを適用することができます。:before以外にも、:afterがあり、これは要素の最後の子要素の後ろに配置される仮想的な要素です。

・動作確認
sampleをPC版はマウスを乗せたとき、スマホ版はタップで確認できます。

中央からアンダーライン

左からアンダーライン

右からアンダーライン

上下からライン

上下左からライン

上下右からライン

上下左右からライン

上下右左からライン

下にアンダーラインフェードイン

下にアンダーラインフェードイン2

左から流れる