I recently saw this effect on a navigation menu and really like its micro-interaction nature. Rather than a simple text decoration, it uses a background effect and animation. This is intended to go on the parent containing the link, but can easily be swapped out and attached directly to the anchor style.
.link--animated a{
color:currentcolor!important;
text-decoration: none;
background-image: linear-gradient(currentcolor, currentcolor);
background-size: 0 1px;
background-position: bottom right;
position: relative;
background-repeat: no-repeat;
transition: background-size 300ms;
padding-block-end: 2px;
&:hover {
background-size: 100% 1px;
background-position: bottom left;
animation: .5s animation-link-hover;
}
}
@keyframes animation-link-hover {
0% {
background-size: 0 2px;
}
100% {
background-size: 100% 2px;
}
}
