HTML/CSS实现按钮底部边框从中心展开动画 适配FiveM RP服务器站点

原有代码存在的问题 #

• ::after伪元素缺少必填的content属性，浏览器不会渲染该伪元素
• 未给::after设置定位规则和缩放原点，无法实现从中心展开的效果
• 错误将hover边框效果绑定在a标签本身，没有控制伪元素的缩放状态
• transform: scaleX'(1)存在语法错误，多了多余的单引号
• HTML结构语义不规范，ul标签的直接子元素应为li标签

修复后代码 #

CSS代码 #

a:link, a:visited {
  color: white;
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #004F10;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 250ms ease-in-out;
}

a:hover {
  color: green;
}

a:hover::after {
  transform: scaleX(1);
}

a:active {
  color: darkgreen;
}

HTML代码 #

<header>
  <ul>
    <li><h2><a href="index.html">Home</a></h2></li>
    <li><h2><a href="rules.html">Rules</a></h2></li>
    <li><h2><a href="https://www.discord.gg/K935Cry73b">Discord</a></h2></li>
  </ul>
</header>

效果说明 #

通过绝对定位的伪元素作为底部边框，默认缩放为0，hover时缩放为1，缩放原点设置为中心，即可实现从中间向左右两侧展开的边框动画。如果需要调整动画速度，可修改transition属性的时长参数，修改background-color即可调整边框颜色。

内容的提问来源于stack exchange，提问作者Normal