<a href="#">boooooooooooop</a>
<br /><br /><br />
<div><a href="#">on multiple lines.</a></div>
body {
background-color: #222b40;
font-size: 3rem;
}
div {
width: 200px;
}
a {
color: #dfe5f3;
text-decoration: none;
background-image: linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)),
linear-gradient(#feb2b2, #feb2b2);
background-size: 100% 2px, 0 2px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 2s linear;
}
a:hover {
background-size: 0 2px, 100% 2px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.