要让 ::after 伪元素始终贴文字底部不动，须设父元素 position: relative，::after 设 position: absolute; bottom: 0; left: 0; height: 2px; bottom: -1px 微调对齐，并在默认状态声明 width: 0 和 transition: width .3s ease。
怎么让 ::after 伪元素始终贴在文字底部不动
关键不是“定住”，而是别让它跟着文字 baseline 漂移。::after 默认是 inline 级，会受行高、字体下降部（descender）影响，一 hover 就歪。必须显式设成 position: absolute，再用 bottom: 0 锚定到底部——但前提是父元素得是 position: relative。
常见错误现象：::after 在不同字高或不同字体下上下跳动，甚至悬停时突然偏移几个像素。
- 导航项（
<a></a>或<li>）必须加position: relative -
::after设position: absolute; bottom: 0; left: 0;，别用top或transform: translateY() - 避免设
line-height过大又不重置伪元素的height，否则bottom: 0会从行盒底边算起，不是文字底边
width 动画为什么一开始没效果，hover 后才动
因为 ::after 初始 width 是 0，但没设 transition，或者只写了 transition: width .3s 却漏了 will-change: width 或触发重排的条件。更常见的原因是：初始状态没显式声明 width，浏览器无法做插值动画。
使用场景：纯 CSS 实现“从左到右划线”，不依赖 JS 控制宽度。
立即学习“前端免费学习笔记（深入）”；
- 必须在默认状态（非 hover）就写明
width: 0，不能靠继承或默认值 -
transition要写在默认状态里，比如a::after { transition: width .3s ease; } - 如果父容器有 padding，
left: 0+width: 100%会超出；建议用right: 0配合width: 0→width: 100%更稳
不同字体/字号下划线位置偏移怎么办
根本原因是字体自身的 baseline 和 descent 不同，而 bottom: 0 是相对于行盒（line box）底边，不是文字本身。小字号时尤其明显——线看起来“浮”在字下面。
性能影响几乎为零，但兼容性要注意：IE 不支持 ::after 在 <a></a> 上的定位（需降级为 <span></span> 包裹文字）。
- 加
transform: translateY(2px)微调（数值按实际字体试） - 更可靠的做法：用
height+bottom: -1px把线“顶”上来一点，比如height: 2px; bottom: -1px; - 不要依赖
vertical-align去调，它对::after的绝对定位无效
移动端点击区域变小或划线闪烁
iOS Safari 和部分安卓浏览器在 hover 时会对 ::after 做合成层切换，如果没设 backface-visibility: hidden 或 transform: translateZ(0)，可能触发重绘导致闪烁；另外，a 标签默认点击热区太小，hover 区域和点击区不一致。
可给出简短示例：
nav a {
position: relative;
padding-bottom: 8px; /* 扩大热区 */
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width .3s ease;
backface-visibility: hidden;
}- 给导航项加足够
padding-bottom，确保手指点中时也触发 hover -
backface-visibility: hidden或transform: translateZ(0)可强制开启硬件加速，减少闪烁 - 避免在
::after里用box-shadow或渐变背景，某些低端机渲染不稳定
划线看着简单，真正跨设备对齐时，bottom 的参照系、transition 的起点、以及移动端的合成策略，三者稍一错位，线就飘了。
