伪元素下划线 hover 闪动的根本原因是 ::after 初始未隐藏，导致渲染时先显示默认宽度再缩放；须设 width: 0 + opacity: 0，配合完整 transition 和 position: relative 定位。
伪元素下划线动画为什么 hover 时闪一下
根本原因是 ::after 初始状态没设透明或隐藏，浏览器渲染时先画出默认宽度的下划线，再缩放/位移——人眼就看到“闪”。必须让伪元素初始不可见，且用 transform 配合 transition 控制变化路径。
实操建议：
- 给
::after设width: 0+opacity: 0（不能只靠visibility: hidden，它不触发重排） - 过渡属性写全：
transition: width 0.3s ease, opacity 0.2s ease，避免只写all引发意外重绘 - 确保父元素有
position: relative，否则::after的left/bottom定位会错乱
用 width 过渡比 transform: scaleX() 更稳吗
是的，但仅限于单行、固定宽度文本。因为 width 直接响应内容盒宽度，而 scaleX() 是基于元素自身尺寸缩放，如果父容器有 padding 或 font-size 动态变化，容易偏移或拉伸失真。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 文字加粗或换字体后，下划线长度突然变短——
width没随content重算 - 响应式布局中，下划线在小屏上超出文字右侧——没用
max-width: 100%限制
推荐写法：
.underline {
position: relative;
}
.underline::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.underline:hover::after {
width: 100%;
}
移动端点击下划线没触发 hover 怎么办
iOS Safari 和部分安卓 WebView 对 :hover 支持极弱，尤其在无触控反馈的页面里，hover 事件可能根本不触发。这不是 bug，是规范行为。
解决路径只有两个：
- 改用
:focus-within+tabindex="0"，让链接可聚焦（适合可操作元素） - 用 JS 监听
touchstart并加临时 class，例如.underline.is-active，再用 CSS 控制::after显示 - 放弃纯 CSS 方案，直接用
pointer-events: none在移动端关掉 hover 动画，降级为静态下划线
注意：不要试图用 @media (hover: hover) 包裹 hover 样式——它在多数移动端返回 false，但动画仍可能被预加载并卡住。
line-height 变化导致下划线位置飘移
伪元素的 bottom 值是相对于父元素 content box 底边计算的，而 line-height 改变会间接影响 baseline 位置，尤其在多行或字号混排时，bottom: -4px 可能变成 -2px 或 -6px。
更鲁棒的做法：
- 把下划线伪元素改成
top: 100%+transform: translateY(-2px)，这样它始终锚定在文字底边之下 - 若文字有
vertical-align，统一设为baseline，避免表格或 inline-block 场景错位 - 慎用
em单位（如bottom: -0.2em），font-size 变化时下划线会跟着缩放，看起来像抖动
复杂点在于：动画和定位必须绑定同一套排版上下文。一旦父元素用了 flex 或 grid 对齐，position: relative 的基准可能漂移——这时候得用 transform: translateX() 替代 width，虽然性能略差，但可控性高。
