应放弃text-decoration，改用::after伪元素模拟：按钮设position: relative并预留padding-bottom，::after绝对定位于底部、初始width: 0、hover时width: 100%配合transition: width 0.3s ease实现滑入动画，同时注意ie11不支持button伪元素需降级处理。
按钮下划线用 CSS 的 text-decoration 会错位
直接对 <button></button> 或 <a></a> 设置 text-decoration: underline 看似简单，但实际会出问题：下划线位置受字体基线影响，不同浏览器渲染不一致，且无法控制粗细、颜色、距离文字的间距。更麻烦的是，button 元素默认有内边距和行高，下划线常贴底或偏移，看起来“飘”或“压字”。
正确做法是放弃 text-decoration，改用伪元素模拟下划线：
.underline-btn {
position: relative;
padding-bottom: 4px; /* 预留空间给下划线 */
border: none;
background: none;
font: inherit;
cursor: pointer;
}
.underline-btn::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #007bff;
transition: width 0.3s ease;
}
.underline-btn:hover::after {
width: 100%;
}
:hover 下划线滑入要加 transition 且避免重绘
只写 width 动画还不够。如果父容器用了 transform 或 will-change，可能触发不必要的重排；如果没设 overflow: hidden，滑入时线条可能短暂溢出按钮边界。
-
transition必须明确指定属性：transition: width 0.3s ease，而不是transition: all .3s，否则其他样式变化（比如颜色）也会被动画拖慢 - 确保
::after的position: absolute容器（即按钮）有position: relative，否则定位失效 - 若按钮含图标或复杂子元素，建议把
::after放在最外层容器上，而非直接作用于button标签
移动端点击区域小，下划线动画容易误触
纯文字按钮在手机上点击热区窄，用户点到下划线区域却没触发点击——因为 ::after 是伪元素，默认不响应事件。这不是 bug，是预期行为。
解决方法只有两个：
- 扩大按钮本身的
padding（推荐），比如padding: 8px 16px，让热区覆盖整个视觉区域 - 或者给伪元素加
pointer-events: none（默认已是），确保它不拦截点击——这点常被忽略，但其实不用改
别试图给 ::after 加 click 事件，它不能绑定事件监听器。
IE11 不支持 ::after 在 button 上生效
IE11 对 button 元素的伪元素支持极差，::after 基本不渲染。如果必须兼容 IE11，得换方案：
- 改用
<a href="#"></a>标签 +role="button"和tabindex="0"模拟按钮语义 - 或者在
button内部手动加一个<span class="underline-line"></span>，用 JS 控制显隐（不推荐，增加 DOM 复杂度）
现代项目基本可忽略 IE，但若客户明确要求支持，得提前确认这个限制不是伪需求——很多时候只是“听说要兼容”，实际用户早已不用 IE。
下划线动画看着简单，真正稳定跨浏览器、跨设备，关键不在怎么“滑出来”，而在怎么让那个 ::after 始终待在该在的位置、不抢点击、不闪跳、不随字体缩放乱跑。这些细节堆起来，才是上线前最后一小时还在调的东西。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
