テキストリンクにホバーすると、左から右へ滑らかに下線が伸びるアニメーション。ナビゲーションの定番エフェクトです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
下線の実体は ::after で敷いた高さ2pxのバーです。widthをアニメーションさせる方法もありますが、transform: scaleX() はレイアウト再計算が起きないため滑らかです。ホバー時と非ホバー時で transform-origin を left / right に切り替えると「左から現れて右へ抜ける」一方向の動きになり、体験が上質になります。
フォーカス時（:focus-visible）にも同じ動きを付けておくと、キーボード操作でも現在地が分かりやすくなります。