Animated CSS underlines that wrap

Nowadays, there are lots of ways to style and animate anchor link underlines. But animating those links when they wrap over multiple lines can still be a challenge. Fortunately, with linear-gradients we can make it work.

The trick here is to use two linear gradients. The first gradient is the default state and the second gradient is the hover state.

On hover, the first gradient's background size will change from 100% to 0, whilst the second gradient goes from 0 to 100%.

a {
  text-decoration: none;
  background-image: linear-gradient(transparent, #70e89f),
                    linear-gradient(transparent, #709ae8);
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 2s linear;
}

a:hover {
  background-size: 0 2px, 100% 2px;
}

This will happen instantly on hover. Adding a transition to the background-size will make the gradient sizes animate nicely between states.

Nicky explains it in more detail, here:

A CSS-only, animated, wrapping underline.

Underlines are hard.Complications quickly arise if you want to do anything fancier than the good ol’ CSS text-decoration: underline…

Nicky blogsTwitter logoThe GitHub LogoNicky Meuleman

Like this post? Got a question?

Reply via: Email, Bluesky, Mastodon, Twitter