p { background: linear-gradient(0deg, slateblue, slateblue) no-repeat right bottom / 0 var(--bg-h); /*joga tudo para uma variavel*/ transition: background-size 350ms; /* velocidade */ --bg-h: 100%; /*para full-background change to 100% ou use .under class */ } p:where(:hover, :focus-visible) { background-size: 100% var(--bg-h); background-position-x: left; /*direção */ } p { --bg-h: 2px; }
simples :hover line
mais examples neste repo
https://github.com/codrops/LineHoverStyles