必须用 ::after 自定义下划线动画，因 text-decoration 不可控；常见不显示原因是缺 content: ""、父元素未设 position: relative、未设 display: block/inline-block；优先用 transform: scalex() 而非 width 实现动画，更流畅且免重排。
直接用 text-decoration 做不了真正可控的下划线动画——位置、粗细、起始点、缓动都锁死，改不动。必须用 ::after 自己画一条线，再驱动它动。
为什么 ::after 下划线不显示？
最常见原因是三个属性没凑齐：
-
content: ""缺失 → 伪元素根本不渲染 - 父元素没设
position: relative→::after的absolute定位会飘到body底下 - 没设
display: block或inline-block→ 高宽和transform动画失效（尤其在inline元素如a上）
::after 下划线该用 width 还是 transform: scaleX()？
优先选 transform: scaleX()，原因很实际：
-
width动画触发布局重排（reflow），旧版 Safari 和低端安卓容易卡顿 -
scaleX()是合成层动画，GPU 加速更稳，起止值写0和1就行，不用算像素 - 必须配
transform-origin: left center，否则缩放中心偏移（尤其带padding的input） - 过渡只写
transition: transform 0.2s ease，别用all，避免意外触发其他属性动画
悬停、聚焦、移动端点击，样式怎么分层写？
混写 :hover 和 :focus 容易被覆盖或冲突，得拆开控制：
- 默认态：
a:not(:hover):not(:focus)::after设transform: scaleX(0) - 悬停态：
a:hover::after只改transform，颜色保持不变 - 聚焦态：
a:focus::after可叠加颜色变化 + 略长一点的过渡（比如0.25s） - iOS 点击闪一下？加
-webkit-tap-highlight-color: transparent，再给::after加z-index: 2
多行文字或响应式字号下，下划线怎么不跑偏？
bottom 和 height 别写死像素，用相对单位：
-
bottom: -0.15em比bottom: -2px更适配不同字号 -
height: 0.1em能随字体缩放自动调整粗细 - 多行文本要生效，父容器得是
display: inline-block或display: table，再配overflow: hidden防伪元素溢出 - IE 不支持
transform动画？降级用background-size: 0 2px→100% 2px配合transition: background-size
真正难的不是写出来，而是让 ::after 在各种字体、缩放、焦点方式、设备上都稳住位置和节奏——position: relative、content: ""、transform-origin 这三样，漏一个就白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
