ホバー（hover）時に動きのある下線を入れる方法【CSSのみ】｜カケウェブ

リンクをhoverされた時、要素に動きのある下線を表示させる方法を紹介します。
CSSのだけで実装可能なのでwebサイトをよりリッチにしてみましょう！

CSSのみで動きのあるホバー（hover）時エフェクトを実装する（下線）

前回の記事で「リンクや画像などのホバーをCSSのみで光ったように見せる方法」を紹介しましたが、有り触れていてつまらない！と思う人も多いのではないでしょうか？
よっぽど画像だけのバナー以外は僕自身も上記の方法は現状使っていません。

jQueryを使わなくても動きのあるホバーをつけることができるので、今回は動きのある下線をテーマに紹介します！

動きのある下線エフェクト実装

では、最初にリンクする要素を作ります。
この部分がhoverしたときに下線が表示されるようにものになります。

HTML

まずはHTMLを書いていきます。
今回はaタグがホバーされたときに、下線が表示されるように設定します。

<div class="btn"><a href="#">ボタン01</a></div>
<div class="btn"><a href="#">ボタン02</a></div>
<div class="btn"><a href="#">ボタン03</a></div>
<div class="btn"><a href="#">ボタン04</a></div>
<div class="btn"><a href="#">ボタン05</a></div>

このように書いてみました。
class名や中に入るテキストは、何でも構いません。

CSS

続いてCSSを書きます。
hover時に出現する下線は、疑似要素の「after」を使用して作成します。

.btn a{
font-size: 15px;
color: #000;
text-decoration: none;
position: relative;
display: inline-block;
}

.btn a:after{
position: absolute;
bottom: -2px;
left: 0;
content: '';
width: 0;
height: 1px; /*線の太さ。*/
background-color: #e8374a; /*線の色。*/
transition: .3s; /*変化する時間の指定。*/
}

.btn a:hover::after {
width: 100%; /*０だった幅を100%にする。*/
}