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>