Border animation on hover with a transparent section moving left to right-CodePudding

I have this code trying to make an animation on hover. Something like this :

TextLink      hover: TextLink
--------             --  ----

I am trying to have an animation that looks like the "transparent" portion is moving from left till the end of the text.

body {
  margin: 0;
  background: #16263d;
}

div {
  padding: 30px;
}

a {
  color: #fff;
  text-decoration: none;
  display: block;
  margin-top: 24px;
  transition: all 0.75s ease-in-out;
}

a span {
  border-bottom: 2px solid #fff;
}

a:hover:after {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  transform: translateX(100%);
}

a:after {
  content: '';
  width: 35px;
  height: 2px;
  background: #16263d;
  display: block;
  position: relative;
  opacity: 1;
  transform: translateX(-35px);
  transition: all 0.75s ease-in-out;
}

<div>
  <a href="#"><span>Text Link and something more than this</span></a>
</div>

The problem is that 100% of the transform transition is not taken into consideration ... seems like only 100px are.

CodePudding user response：

First, you need to understand that percent values for transforms are a portion of the element's bounding box (size), not of it's parent.
As the pseudo element is 35px wide, the transform moves it 35px. (see MDN for more info)

This said, you could use a border on the pseudo element for the "transparent" portion like this :

body {
  background: #16263d;
}

a {
  font-size:20px;
  position:relative;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding:.2em 0;
  border-bottom: 2px solid #fff;
}
a:after {
  content: '';
  position:absolute;
  bottom:-2px;
  right:100%;
  width:100%;
  height: 2px;
  border-right: 35px solid #16263d;
  transition: transform 0.75s ease-in-out;
}

a:hover:after {
  transform: translateX(100%);
}

<a href="#">Text Link and something more than this</a>

CodePudding user response：

Try to use gradients:

span {
 --g:40px; /* the gap */

 font-size:40px;
 background:
   linear-gradient(90deg,
      black   calc(50% - var(--g)/2),
      #0000 0 calc(50%   var(--g)/2), 
      black 0
   ) right bottom/calc(200%   var(--g)) 3px /* 3px = thickness */
   no-repeat;
}

span:hover {
  background-position: left bottom;
  transition:0.5s;
}

<span>Some text</span>