Animated Hover Underline
A text link with a smooth animated underline that slides in on hover.
Adjust the preview
Every choice updates the preview and the wording below.
Direction
Thickness
Color
Speed
Your prompt
Highlighted values follow your choices — click one to write your own.
Create a text link with an animated underline on hover. The underline slides in from the center and is 2px thick with white color. The transition takes 0.3s. Use a pseudo-element with scaleX and transform-origin for the directional effect.
Paste it into Claude, Cursor, or v0 along with the context for your project.