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

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>

Always post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Aug 18 '22 at 06:11
I can certainly find better ones [on the net](https://www.google.com/search?q=link+hover+text-decoration+animation) — mplungjan, Aug 18 '22 at 06:15

score 1 · Accepted Answer · answered Aug 18 '22 at 06:22

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.

answered Aug 18 '22 at 06:22

Damien Puaud

274
1
7

thank you alot! was my code not working because of the position relative and absolute? – Paul Timis Aug 18 '22 at 06:38
Not only, also the scale(0) transformed to a scale(1) doesn't work this way. That's why I directed you to a simpler way : handling the width – Damien Puaud Aug 18 '22 at 07:20
ah, now i understand what happened there and how it works, and basically you set left to 50% and on the hover to 0 so the transition will start from the middle correct? – Paul Timis Aug 18 '22 at 07:40

CSS underline animation not working at all

1 Answers1