Animate a line under a hyperlink using only CSS [duplicate] - css

Question

This question already has answers here:
How to animate underline from left to right?
(3 answers)
Closed 2 years ago.
I'm trying to animate a line in a particular way (see the following gif for a visual representation) under a hyperlink using the following code structure:
.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
text-decoration: none;
}
.navlink a::after {
display: block;
content: '';
border-bottom: solid 0.2vmax red;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.navlink a:hover::after {
animation: scaleup 3s forwards;
}
#keyframes scaleup {
50% {
transform: scaleX(1)
}
100% {
transform-origin: 50% 0, scaleX(0)
}
}
.navlink a:after {
transform-origin: 0% 50%;
}
<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>
I can get the line to animate in one direction OK but having problem with the second half of the animation. Can anyone help me understand a better way to do this using only CSS?

Answer 1

You might do it using translateX, so you wouldn't need to switch transform-origin:
.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
overflow: hidden;
text-decoration: none;
}
.navlink a:after {
display: block;
content: '';
border-bottom: solid 0.2vmax;
transform: translate(-110%);
transition: transform 250ms ease-in-out;
}
.navlink a:hover:after {
animation: scaleup 3s forwards;
}
#keyframes scaleup {
50% {
transform: translate(110%)
}
}
.navlink a:after {
transform-origin: 0% 50%;
}
<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>

Answer 2

Used different approach, pseudo element of parents width floats from left to right and back
.navlink {
position: relative;
color: white;
}
.navlink a {
display: inline-block;
margin: 0;
text-decoration: none;
position: relative;
overflow: hidden;
padding-bottom: 5px;
}
.navlink span::after {
position: absolute;
left: -100%;
display: block;
content: ' ';
border-bottom: solid 0.2vmax red;
height: 2px;
width: 100%;
transition: left 500ms linear;
left: -100%;
}
.navlink a:hover span::after {
transition: left 500ms linear;
left: 100%;
}
<nav id="main-nav">
<div class="main-nav-content">
<div class="navlink">
<a href="/aboutus.html">
<span>About Us</span>
</a>
</div>
</div>
</nav>