CSS underline animation not working at all

Question

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>
    <a href="#" class="logo2"><img src="images/Facebook.png"></a>
    <a href="#" class="logo2"><img src="images/Instagram.png"></a>
    <a href="#" class="logo2"><img src="images/Twitter.png"></a>
  </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.