Animated Hover Underline

InteractionsLive Preview

A text link with a smooth animated underline that slides in on hover.

Customize Preview

Select options to update the live preview, or edit the prompt directly below.

Direction

Thickness

Color

Speed

Your Prompt

abcclick to edit

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.