javascript - 悬停时的直线动画

Question

我想做一些事情，我有一条线穿过文本，当我将鼠标悬停在文本上时，线会缩回。

这是我目前所拥有的:

#about {
  text-decoration: line-through;
  text-align: right;
  padding-right: 80px;
  float: right;
  color: black;
}
#about:hover {
  text-decoration: none;
}

<div id="about"><a href="about.html" target="_new">ABOUT</a>
</div>

我该怎么做？ CSS 还是 Javascript？

Answer 1

伪元素是这里的理想选择。

a {
  display: inline-block;
  text-decoration: none;
  margin: 25px;
  color:black;
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  top:50%;
  transform:translateY(-50%);
  width: 100%;
  right: 0;
  height: 25%;
  background: currentColor;
  transition:width 0.25s ease;
}

a:hover::after {
  width: 0;
}

<a href="#">Profile</a>

<a href="#">Lorem ipsum dolor.</a>