What the Frontend? Open the interactive gallery →
Hover & Micro-interactions

Link underline draw

A hover underline that draws itself from one end to the other rather than appearing instantly.

What you're seeing

Hover a link and a line draws from left to right beneath it. Leave and it erases.

Where you'll see it

Navigation links, body text links.

Difficulty

Very low — 1/5

Libraries that build it

CSS onlyGSAP

Ready to prompt — paste this into your AI coding tool

"Use CSS pseudo-element with scaleX transform on hover, transform-origin: left, transition 0.3s ease"

Seen in the wild

Eduard BodakA Cologne freelancer's Y2K-zine of a portfolio — services dealt out as trading cards that unfold on scroll, and a standard-vs-feel demo that sells motion by letting you feel it.

Related Hover & Micro-interactions effects

Elastic buttonHover image previewButton morphImage distortion on hoverTooltip animationToggle switch
See the animated preview in the dictionary →