【CSS】hover時に左から右に下線を引くアニメーションの作り方

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

テキストにhoverした時に下線を引くアニメーションの実装方法を知りたい
CSSの疑似要素 afterを使ってアンダーラインアニメーションを実装したい

という方のお悩みを解決します！

下線アニメーションの使い所は？
下線は疑似要素 afterで実装
下線アニメーションデモ
下線アニメーションが使われているWebサイト
まとめ

下線アニメーションの使い所は？

今回紹介する下線アニメーションがよく使われるのはずばりナビゲーションメニューです！

上の添付画像のようなメニューのリンクテキストをホバーした時に、左から右へ絶妙に心地良いスピードで下線が引かれるアニメーションよく目にするかと！

CSSのhoverと疑似要素 afterを駆使すれば誰でも簡単に実装できますのでさっそく見ていきましょう〜

下線は疑似要素 afterで実装

下線は下線を引きたい要素のafterで実装！

HTMLは以下を使用します。

下線アニメーションのHTML

<a href="#" class="Item">
  <span class="Item-Text">下線アニメーション</span>
</a>

spanタグで囲った要素に下線が引かれる仕様です。

CSSは以下を使用します。

下線アニメーションのCSS

.Item{
  text-decoration: none;
  color: #5bc8ac;
  font-size: 24px;
}
.Item-Text{
  position: relative;
  z-index: 1;
}
.Item-Text:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;/*テキストからの距離*/
  width: 0%;/*初期状態では下線非表示*/
  height: 2px;/*下線の高さ*/
  background: #5bc8ac;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.Item:hover .Item-Text:after{
  width: 100%;/*hover時に表示*/
}

上記コードのポイントは、下線の横幅を初期状態でwidth:0%にしておき、親要素がhoverされた時にwidth:100%にする点です。

アニメーションのスピードはtransition: all 0.4sの数値をよしなに変更してくださいまし。