<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.