CSS underline animation not working at all [duplicate] - html

Question

This question already has answers here:
How to animate underline from left to right?
(3 answers)
Closed 6 months ago.
I am trying to make an underline animation that comes from the middle and extends to the sides
I copied the code from an example i found online which was working but not on my case
I have added the code on jsfiddle below
you are looking in the beginning of the css for .htext:after and .htext:after:hover
https://jsfiddle.net/wvm2sfp0/1/
body {
background: rgb(14, 13, 13);
color: white;
width: 100%;
}
header {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: linear-gradient(to top, rgba(0, 0, 0, 0), rgb(0, 0, 0, 0.8));
}
a {
text-decoration: none;
color: inherit;
}
p {
color: white;
}
.div1 {
background-image: url(../images/Group\ 10.png);
}
.htext {
margin-right: 3%;
font-size: 0.75vw;
transition: text-decoration 0.3s;
}
.htext:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #54B3A1;
transform-origin: center;
transition: transform 0.25s ease-out;
margin-bottom: -20px;
}
.htext:after:hover {
transform: scaleX(1);
transform-origin: center;
}
.logo1 {
margin-right: 10%;
height: 7%;
width: 8%;
}
.logo2 {
margin-right: 1.5%;
}
<div class="div1">
<header>
<img src="images/viennalogo.png" class="logo1">
<a href="#" class="htext">
<p>HOME</p>
</a>
<a href="#" class="htext">
<p>BRANDS WE WORK WITH</p>
</a>
<a href="#" class="htext">
<p>BRAND GALLERY</p>
</a>
<a href="#" class="htext">
<p>NEWS</p>
</a>
<a href="#" class="htext">
<p>ABOUT US</p>
</a>
<a href="#" class="htext">
<p>CONTACT</p>
</a>
<img src="images/Facebook.png">
<img src="images/Instagram.png">
<img src="images/Twitter.png">
</header>
</div>

Answer 1

well for an underline expansion, I wouldn't go with scaleX (for a lot of reasons)...
Instead, try this (I hope it's what you're looking for:
.htext {
margin-right: 3%;
font-size: 0.75vw;
transition: text-decoration 0.3s;
display: inline-block;
padding: 15px 20px;
position: relative;
}
.htext:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #54B3A1;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.htext:hover:after {
width: 100%;
left: 0;
}
For this to work, make sure your .htext class has a relative position, and that your .htext:after is absolute to that.