A CSS-only, animated, wrapping underline

Avatar of Chris Coyier
Chris Coyier on

Find and fix web accessibility issues with ease using axe DevTools Pro. Try for free!

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 →