A CSS-only, animated, wrapping underline

Avatar of Chris Coyier
Chris Coyier on

Try Mailchimp today. MailChimp Tracking Pixel

Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link is hovered, another color underline kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, so multiple backgrounds are used instead, and fortunately, it works with text that breaks across multiple lines as well.

Direct Link →