scaleを使った、hoverでアンダーラインが中心から広がっていくアニメーションを実装するコード

CSS transforms creating a nice hover effect for links

DEMO 表示

リンクには既定値で、最初からアンダーラインが表示されるようになっています、逆にマウスオーバーすることで表示させるっていう使い方も結構されます。今回のコードは、text-decorationを使ったものではなく擬似要素を使って線を表現しています、そのことによってより柔軟な表現が可能になります

コードの解説と実装方法

アンダーラインの部分は a の擬似要素 after を使って作られています。
それを transition で変化させています

変化する基準は scaleです。 scaleは拡大縮小を行うことが出来ます
このコードでは、X軸に対して拡大縮小します。つまり横方向のみに伸びたり縮んだりして見えるようになります

これをマウスオーバーすることで動作するようにしています。

コード SCSS版

a {
  position: relative;
  display: inline-block;
  padding: .4em;
  text-decoration: none;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    background-color: red;
    transition: all .3s ease;
  }
  
  &:hover {
    &::after {
      transform: scaleX(1);
    }
  }
}

CSS版

a {
  position: relative;
  display: inline-block;
  padding: .4em;
  text-decoration: none;
}
a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: red;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

擬似要素は、親要素のaタグと同じ長さになるように width を 100％ に

position で真下に来るようにしています。 position の位置が left、bottom になっていても scale の特性によって要素の中心を基準に拡大、縮小するのをうまく使って表現しています