background-size

An underline that slides in

Caveattext-decoration cannot animate its width, so the underline here is a background: a one-colour gradient sized 0% 2px, grown to 100%. The catch is that the percentage resolves against the whole inline box — on a link that wraps, each line fragment shows a slice of one long underline. Keep it for single-line labels and give wrapped prose links a plain text-decoration.

FallbackGive :focus-visible the same treatment — keyboard users hover nothing. With animations off the size still lands, instantly, so nothing is lost but the slide.

a {
  /* the underline is a background */
  background:
    linear-gradient(currentColor, currentColor)
    no-repeat left 100% / 0% 2px;
  transition: background-size .25s;
}

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

Published 19 Aug 2026