リンクhover時に下線が中心から広がるアニメーションの実装方法

今回は「リンクにカーソルを合わせた時に中央から下線が現れる」ということをCSSを使って実装する方法をご紹介いたします。

グローバルナビなどに使われているのをよく見ますね。実装するには下記コードをそのままコピペでＯＫです。※今回はa要素に設定する場合です。

a {
  position: relative;
  padding: .4em;
  text-decoration: none;
}

a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);　/*--ここを0にすることで下線は非表示となる--*/
  -ms-transform: scaleX(0);　/*--ここを0にすることで下線は非表示となる--*/
  transform: scaleX(0);　/*--ここを0にすることで下線は非表示となる--*/
  background-color: blue;
  -webkit-transition: all .3s; /*--0.3秒かけて下線が表示される--*/
  transition: all .3s;　/*--0.3秒かけて下線が表示される--*/
}

a:hover::after {
  -webkit-transform: scaleX(1); 
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

それでは解説していきます。

1.元となるaの要素の設定(1~5行目)

元々リンクになる箇所には下線が引かれる場合があるのでtext-decorationをnoneにして余計な装飾を無効にします。このときposition:relativeと記述します。

2.下線を表現する擬似要素(7~20行目)

まずは下線の部分は:afterの擬似要素で表現します。線を下に表示したいのでposition:absolute bottom:0 left:0;とします。幅はaに合わせるのでwidth:100%;。線の太さはheightで設定し、色はbaclgrond-colorで指定します。

3.アニメーションの実装(22〜26行目)

続いて線の表示・非表示を設定します。横に伸びる表現はscaleXを使用します。最初はscaleの数値を0に指定して下線は見えません。カーソルを合わせたら（：hover時）scaleを「1」に設定することで下線が表示されます。この「1」という数値は100%（等倍）という意味でもありますので、この数値を「2」「3」にすると200%・300％のなが〜い線にすることも可能です。ここまででカーソルを乗せた時に下線が出るという表現を実装することができました。

最後に:afterの擬似要素にtransition:all 0.3s;を記述し、線が横に伸びるアニメーションを実装します。上記のコードだと0.3秒かけて線が伸びていきます。また、allと記述することで全ての要素に0.3sが効きます。これでリンクにカーソルを合わせた時に線が伸びていくアニメーションが完成です。