【CSS】:hover でボーダーボトムをふわっと出現させるコードを紹介します

今回は、hover　により、ボーダーボトムをふわっと出現させるアニメーションを紹介します。
ヘッダーのグローバルナビゲーションでよく見かけますね。

コード

See the Pen
Untitled by t.h (@tomtom15)
on CodePen.

CSSの記載は必要最低限に抑えてますので、余白など足りない部分はアレンジしてください。

CSSには、初心者の人でもわかりやすいように、コメントを入れてます。
不要だったら消しちゃってください。

まとめ

ヘッダーメニュー（グローバルナビゲーション）では、
よく使われるアニメーションなので是非試してみてください。

フォントの色、ボーダーの太さなど、出現させるまでの時間など、
お好みで変えていろいろ試して、自分好みにカスタマイズしちゃってください。

hoverアニメーションはこちらでたくさん紹介されております。https://lab.sonicmoov.com/markup/css/hover-css/

hover関連の記事も紹介しておきます。↓