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

Posted 2023-03-06

【中文标题】CSS：bottom-border-transition - 从中​​间展开

【英文标题】：CSS: bottom-border-transition - expand from middle

【发布时间】：2014-12-30 19:53:51

【问题描述】：

我想在我的网站上添加一些过渡。我已经有了，当有人在输入字段中时（所以：focus），边框会随着过渡而改变颜色。我希望从中心到左右的过渡发生。

所以动画是两边的扩展边框。这可能与 CSS 吗？如果我必须使用 Jquery 或 javascript 也可以。

提前致谢， 伊恩

【参考方案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>

【讨论】：

嗨，谢谢，我如何为单个 li 元素覆盖它以禁用此效果。请说出我应该在style 中添加什么以从CONTACT US 中删除该效果？

如何增加行和文本之间的间距？