hoverで下線を引く（アニメーション）

PC用仕様ですが　こういうの↓ ↓ ↓

HTML

<ul>
<li><a href="#">トップ</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">アクセス</a></li>
</ul>

CSS

※リストの見た目等は省略してポイントの下線の部分のみ記載します

li a{
　　color:#333;
　　text-decoration:none;
　　position:relative
}

li a::after {
　　position: absolute;
　　bottom: -5px;
　　left: 0;
　　content: '';
　　width: 100%;
　　height: 1px;
　　background: #333;
　　transform: scale(0, 1);
　　transform-origin: left top;
　　transition: transform 0.3s;
}

li a:hover::after {
　　transform: scale(1, 1);
}

::afterとposition:absoluteを使ってリストaタグの下に高さ1pxのボックス（線）を置きます
この線をtransform :scaleで伸び縮みさせる
transform:scale(0,1)はX方向に0、Y方向に1
→0なので見えなくなります

そして:hover時にX方向の伸縮を1に
→1倍つまり等倍、もとの大きさで見えるようになります
この変化をtransitionを使ってアニメーションで行うことで
線がすっと伸びるように見えます

上記の例はtransform-origin、要素の始まりをleft topにしているので
左端から線が伸びているように見えます
これがcenter topだと真ん中から線が伸びます
↓↓↓