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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

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

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

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

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

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

下線は疑似要素 afterで実装

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

HTMLは以下を使用します。

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

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

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の数値をよしなに変更してくださいまし。

下線アニメーションデモ

今回のデモです。

「下線アニメーション」というリンクテキストに実際にホバーしてヌルっと感を味わってくださいまし。

下線アニメーションが使われているWebサイト

下線アニメーションが使われている実際のWebサイトで参考になりそうなものを2つ紹介！

TVアニメ「ソードアート・オンライン アリシゼーション」公式サイト

ONE PIECE.com（ワンピースドットコム）

まとめ

今回紹介した「hover時の下線アニメーション」は実際のコーディング案件での使用頻度が比較的高いTipsです！

こういった少しのエフェクトがあるだけでちょっぴりサイトがおしゃんになるのでぜひ使ってみてください〜

「CSSやJSのアニメーションをもっと知りたい！」

という方は以下の記事も目を通してみてくださいまし〜