v154 · text-decoration-inset

The reveal effect

The hover underline that sweeps in from the left. Everyone has built it with a background gradient because that was the only width you could animate. Here it is both ways — hover either link, then narrow the panel until the links wrap, which is where the gradient version comes apart.

Hover both

Background gradient

background-image: linear-gradient(…);
background-size: 0% 3px;
background-position: 0 1.35em;
transition: background-size .28s;
/* :hover { background-size: 100% 3px } */

Real decoration, inset

text-decoration: underline;
text-decoration-thickness: 3px;
text-decoration-inset: 100% 0;
transition: text-decoration-inset .28s;
/* :hover { text-decoration-inset: 0 } */
What each approach gets right
behaviourgradientdecoration

see also