Css animation to remove then add back text underline

Question

Im trying to emulate the animation on this sites links https://www.baunfire.com/

When you hover over the LETS TALK link, first the underline disappears, then it reappears

So far I have this

.link-underline{
  position:relative;
  text-decoration:none;
  display:inline-block;
}
.link-underline:after {
  display:block;
  content: '';
  border-bottom: solid 1px #000;  
  transform: scaleX(1);  
  transition: transform 250ms ease-in-out;
  transform-origin:100% 50%
}
.link-underline:hover:after { 
  transform: scaleX(0);
  transform-origin:0 50%;
}

<a href="#" class="link-underline">link underline.</a>

Which removes the underline when you hover over the link, and underlines the link again when you hover out of the link. What I'm trying to do is have the link be underlined again after a 1 second delay, instead of waiting for you to mouseout.

Also, I'm trying to make it go left to right, instead of right to left

Temani Afif · Accepted Answer · 2020-07-26T13:33:42.917

You can do this with a background animation:

.link-underline{
  --n:4; /* adjust this to control the delay */

  text-decoration:none;
  display:inline-block;
  background:
    linear-gradient(to right,
       #000          calc(100%/var(--n)),
       transparent 0 calc((var(--n) - 1)*100%/var(--n)),
       #000 0) 
    bottom right/
    calc(var(--n)*100%) 1px 
    no-repeat;
}
.link-underline:hover {
  background-position:bottom left;
  transition:1.5s; /* adjust this to control the total duration */
}

<a href="#" class="link-underline">link underline.</a>

Related question to get different effect: How to animate underline from left to right?

Css animation to remove then add back text underline

1 Answers1