Underline animation
Also called animated underline, hover underline effect, or link underline animation
A link underline that draws itself on hover, growing from the left, from the center, or sweeping through, instead of simply appearing.
const LINKS = [
{ label: 'Product', href: '/product' },
{ label: 'Pricing', href: '/pricing' },
{ label: 'Docs', href: '/docs' }
];
// At rest the origin sits on the right, so on leave the bar exits rightward.
// On hover or focus it flips to the left and the bar grows from there.
// With reduced motion the bar fades in at full width instead.
const underline =
'after:absolute after:inset-x-0 after:-bottom-1 after:h-0.5 after:origin-right after:scale-x-0 after:bg-current after:transition-transform after:duration-250 after:ease-[cubic-bezier(0.23,1,0.32,1)] hover:after:origin-left hover:after:scale-x-100 focus-visible:after:origin-left focus-visible:after:scale-x-100 motion-reduce:after:scale-x-100 motion-reduce:after:opacity-0 motion-reduce:after:transition-opacity motion-reduce:hover:after:opacity-100 motion-reduce:focus-visible:after:opacity-100';
export function NavLinks() {
return (
<nav className='flex gap-6 text-sm font-medium'>
{LINKS.map((link) => (
<a key={link.href} href={link.href} className={`relative ${underline}`}>
{link.label}
</a>
))}
</nav>
);
}Give the navigation links an animated underline: a 2px bar under each link that scales from scaleX(0) to scaleX(1) from the left over 250ms with cubic-bezier(0.23, 1, 0.32, 1) on hover and :focus-visible. On mouse leave, switch transform-origin to the right so the line exits to the right. When prefers-reduced-motion is set, fade the line in instead of scaling it.
Paste into Layerwise or any AI coding tool.
What is Underline animation?
An underline animation replaces the browser underline with a thin bar under the link, usually a ::after pseudo-element, that starts at scaleX(0) and grows to full width when the pointer arrives. transform-origin decides where it grows from: the left edge, the center, or the left on enter and the right on leave, so the line sweeps through the word.
It suits navigation menus, footer links, and links in editorial layouts, where a small, quick response confirms the target. Around 200 to 300ms with an ease-out curve feels responsive.
Links inside paragraphs still need a visible cue before hover, such as a static underline or a distinct color, so people can tell they are links. Show the same animation on keyboard focus with :focus-visible, and remember that touch screens have no hover. Scaling with transform stays smooth; animating width works too but costs more on every frame.
Related terms
All termsHover effect
A visual change, such as a lift, glow, or zoom, that happens when the mouse pointer moves over an element to show it can be clicked.
Transform origin
The point an element rotates and scales around. It defaults to the center, and moving it changes where a transform seems to start.
Focus ring
An outline that marks which element has keyboard focus, so people moving through a page with the Tab key can see where they are.
Micro-interaction
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.