テキストにホバーした時に、左から右へ滑らかに下線が伸びるアニメーション効果です。ナビゲーションリンクやボタンで使われる人気のUIエフェクトです。
::before疑似要素でwidth: 0から100%に変化させるのがポイント。transform: scaleX()を使う方法もありますが、widthの方が直感的です。中央から広がるアニメーションはleft: 50%; transform: translateX(-50%);で実現できます。