我在标题下添加了一个动画线。但不能很好地传播

Question

我已经搜索了问题，但找不到下面提到的问题的解决方案

这是我的代码：

＆＃13;

＆＃13;

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%;
}
a {
  color: #000;
  text-decoration: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

目前它会像这样在一个方向制作动画：

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

但我需要它来制作这样的动画。

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

我知道它暂时不起作用，但它可能有一个解决方案。但我不知道。请给我一些建议。

由于

Answer 1

使用伪元素和缩放变换而不是实际的非语义样式跨度。

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>