CSS underline hover effect

<p>
  <a href="#">Multiline<br />effect</a>
</p>
<p>
  <a href="#" class="underline">Underline<br />version</a>
</p>

a {
  background: linear-gradient(0deg, slateblue, slateblue) no-repeat right bottom /
    0 var(--bg-h);
  transition: background-size 350ms;
  --bg-h: 100%;
}
a:where(:hover, :focus-visible) {
  background-size: 100% var(--bg-h);
  background-position-x: left;
}
 
.underline {
  padding-bottom: 2px;
  --bg-h: 2px;
}
 
body {
  font-size: 2em;
  text-align: center;
}
 
a {
  text-decoration: none;
  color: inherit;
  line-height: 1;
}