Animate a line under a hyperlink using only CSS

Question

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?

score 0 · Answer 1 · answered Sep 17 '20 at 17:49

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>

score 0 · Answer 2 · answered Sep 17 '20 at 18:03

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>

Animate a line under a hyperlink using only CSS

2 Answers2