Underline Reveal
アンダーラインリビール
View project
どんな動き？
テキストリンクにカーソルを乗せると、下線が左端から右端に向かって伸びていくホバーアニメーション。離れると同じ方向、または逆方向にすっと消える。ミニマルなテキストリンクの装飾として、ナビゲーションや本文中のリンクで多用される定番表現。
よく使う場所
テキストリンクナビゲーションフッターリンク
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Grow an underline from left to right beneath a text link on hover.Trigger:
Mouse enters the text link (hover).
Initial state:
transform: scaleX(0)
transform-origin: left
Animation:
The underline grows from left to right beneath the text.
Final state:
transform: scaleX(1)
Shrinks back (or exits to the right) on mouse leave.
Timing:
duration: 0.3s, easing: ease-out.実装方法の候補
この動きは以下の技術で実装できます。
CSS :hover + transform: scaleXCSS background-size
別名・関連ワード
Underline HoverLink Underline AnimationGrow Underline