css按钮想在hover时显示底部滑动下划线怎么办_利用::after伪元素打造滑动线条-css教程-PHP中文网

css按钮想在hover时显示底部滑动下划线怎么办_利用::after伪元素打造滑动线条

P粉602998670

发布： 2025-12-16 18:00:10

原创

761人浏览过

用::after伪元素实现按钮hover下划线的关键是：按钮设position: relative，::after设absolute定位并用transform: scaleX(0/1)配合transform-origin控制滑动方向，transition实现0.3秒平滑动画。

css按钮想在hover时显示底部滑动下划线怎么办_利用::after伪元素打造滑动线条

用 ::after 伪元素实现按钮 hover 时底部滑动下划线，关键是把线条作为绝对定位的子层，从左到右平滑过渡。

基础结构：按钮 + 伪元素线条

确保按钮有相对定位，这样 ::after 才能相对于它定位；线条默认隐藏在左侧，hover 时通过 transform 或 width 动画展开。

按钮设置 position: relative;
::after 设为 position: absolute; bottom: 0; left: 0;
初始状态设 width: 0; 或 transform: scaleX(0);
hover 时设 width: 100%; 或 transform: scaleX(1);
加上 transition: all 0.3s ease; 实现滑动效果

推荐写法：用 transform 更高性能

相比改变 width，用 scaleX() 触发 GPU 加速，动画更流畅，尤其在移动端。

.btn {
  position: relative;
  padding: 12px 24px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
.btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #007bff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.btn:hover::after {
  transform: scaleX(1);
}

登录后复制