godtail godtail - 3 months ago 9
CSS Question

I add a animation line under the title. but can't spread well

I've googled the problem but couldn't find an solution for problem mentioned below

Here's my code:



span.line-wrap {
position: relative;
display: inline-block;
}
span.line {
display: inline-block;
position: absolute;
top: 100%;
width: 0;
border-top: 2px solid #666;
-webkit-transition: width 0.5s ease-in;
}
span .line-left {
left: 0;
}
span .line-right {
left: 50%;
}
span.line-wrap:hover span.line {
width: 50%;
}

<h2>
<span class="line-wrap">
<span class="line-left"></span>
<span class="line-right"></span>
<a href="xxx">title</a>
</span>
</h2>





Currently it will animate in one direction like this:

Long long long long title.
---- -----


But I need it to animate like this.

Long long long long title.
----------


I know it dosen't works for now, but it might have a solution. But I have no idea. Please give me some suggest.

Thanks

Answer

Use a pseudo-element and a scale transform rather than actual unsemantic styling spans.

h2 {
  text-align: center;
}
a {
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  color:rebeccapurple
}
a::after {
  content: '';
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  height: 4px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform .35s ease;
}
a:hover::after {
  transform: scaleX(1);
}
<h2>
       <a href="xxx">title</a>
</h2>