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