【CSS】マウスカーソルが乗るとアンダーラインがニュッと出てくる

はじめに

・自分自身の備忘録として書きます。
・間違いなどあればご指摘いただけますと幸いです。

こんな感じ

コードはこんな感じ

a {
  color: #707070;
  position: relative;
  text-decoration: none;
}
a:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: #555;
  transform: scale(0, 1);
  transform-origin: left;
  transition: 0.5s;
}
a:hover {
  color: #101010;
}
a:hover:before {
  transform: scale(1);
}

transform-origin: left;を指定しない場合、中心から左右に向かってアンダーラインが出ます
height: 1px;はアンダーラインの太さです
※hoverした時に文字色が変わるようにしていますが、これはアンダーラインと関係ない部分です