The hover underline that makes any navbar feel premium
A 4-line CSS trick using scaleX and transform-origin that turns a boring link into something that feels intentional.
- →Animate a pseudo-element's scaleX from 0 to 1 for a swipe-in underline.
- →transform-origin: left makes it grow from the left, not fade in.
- →Scaling is GPU-accelerated, so it stays smooth on cheap phones.
Most navbar links do nothing on hover, or they fade a color. Here's a tiny detail that instantly reads as 'someone cared': an underline that wipes in from the left.
The trick
Put a pseudo-underline under the link, scale it to zero on the X axis, and set the transform-origin to left. On hover, scale it back to one. Because the origin is on the left, it grows outward like a swipe, not a fade.
.link { position: relative; }
.link .u {
position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
background: linear-gradient(90deg, #38bdf8, #818cf8);
transform: scaleX(0);
transform-origin: left;
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.link:hover .u { transform: scaleX(1); }Why it works
Scaling is GPU-accelerated, so it's buttery even on cheap phones. The left origin gives it direction, and the cubic-bezier easing gives it a confident, slightly snappy feel. Swap the origin to center for a different vibe.
You will find plenty of animated, copy-paste components built on tricks like this in my UI library, take them and ship.
Frequently asked questions
How do I animate an underline on hover in CSS?+
Add a pseudo-element under the link, set transform: scaleX(0) with transform-origin: left, and on :hover set scaleX(1). The underline wipes in from the left instead of just appearing.
Why use scaleX instead of width for the underline?+
scaleX is GPU-accelerated and doesn't trigger layout, so it animates smoothly even on low-end devices. Animating width forces the browser to recalculate layout each frame.
I build fast, SEO-ready sites and rank them on Google and AI search.