CSS：bottom-border-transition - 从中​​间扩展

Question

我想在我的网站上添加一些转换。当有人在输入字段中时（因为：焦点），边框会随着过渡而改变颜色，我已经知道了。我希望从中心到左右发生这种转变。

因此，动画是双方扩展的边界。这可能与CSS有关吗？如果我必须使用Jquery或Javascript，那很好。

提前致谢， 伊恩

Answer 1

您可以使用CSS进行边框转换。 希望这可以帮助。 CODEPEN example

HTML：

body {
  padding: 50px;
}

a, a:hover {
  color: #000;
  text-decoration: none;
}

li {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
  margin-right: 10px;
}
li:last-child {
  margin-right: 0;
}

li:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
li:hover:after {
  width: 100%;
  background: blue;
}

<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">PAGE</a></li>
  <li><a href="#">ABOUT US</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>