Underline draw on hover

Link underline sweeps in from the left on hover. Nav uses this pattern on nav items — one of those details you notice only when it's not there.

by FWONanimation-hover animation-textvanilla

Get a site with blocks like this

Live preview

open in new tab ↗

<div class="a18">
  <a href="#" class="hover">Services</a>
  <a href="#" class="hover">Case studies</a>
  <a href="#" class="hover">Book a call</a>
</div>

Block id: tim-18-underline-draw-on-hovervanilla · drop-in

More animation-hover blocks

Animated gradient-border button

21st.dev

AI agent command panel with thinking state

linear

Hero video dialog with thumbnail

magicui

Meteor shower overlay

magicui

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call