用::after伪元素实现按钮hover下划线的关键是：按钮设position: relative，::after设absolute定位并用transform: scaleX(0/1)配合transform-origin控制滑动方向，transition实现0.3秒平滑动画。
用 ::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);
}
进阶效果：从中心向两边展开
只需改 transform-origin 为 center，再配合 scaleX(0) → scaleX(1)，就能实现居中扩散效果。
立即学习“前端免费学习笔记（深入）”；
- 保持
left: 50%; transform: translateX(-50%) scaleX(0);初始居中缩为 0 - hover 时改为
transform: translateX(-50%) scaleX(1); - 或直接设
transform-origin: center;配合left: 0;也能生效
兼容性与细节提醒
这个方案在现代浏览器（Chrome/Firefox/Safari/Edge）中完全支持，IE11 也 OK；注意避免在 inline 元素（如 <a></a> 默认）上直接用，建议加 display: inline-block 或 block。
- 如果按钮文字换行，
width: 100%仍有效，线条会贴底铺满容器宽度 - 想加颜色渐变？把
background换成linear-gradient即可 - 多个按钮共用样式？确保类名统一，无需额外 JS
基本上就这些。不复杂但容易忽略定位和 transform-origin 的配合 —— 调对了，线条就听话地滑起来。
