javascript - 如何创建一条动画线抛出链接中的文本？

Question

我正在创建我的工作网站，在我的导航栏中我有 3 个链接。 1. 关于 2.元素 3.接触。

这些文本都在一个 (a) 标签中。 并且 a 标签包装在一个 div 容器中。 在悬停(链接)时，我想要一条动画白线通过抛出(中间)的文本。仅在悬停时。

请仅提供 css/javascript/jquery 解决方案。

Answer 1

您可以使用 :before 伪元素来创建元素并在悬停时简单地设置其宽度的动画。

E.G:这个或类似的东西。

div {
  display:inline-block; padding:10px; margin:0 10px 10px 0;
  background:#333333;
}
div > a {
  position: relative;
  color: #000;
  text-decoration: none;
}
div > a:hover {
  color: #fff;
}
div > a:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 50%;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
} 
div > a:hover:before {
  visibility: visible;
  width:100%;
}

<div>
<a href="#">About</a>
</div><div>
<a href="#">Projects</a>
</div><div>
<a href="#">Contact</a>
</div>