下划线用::after实现动画无效的主因是父元素未设position: relative，导致伪元素脱离文档流定位失效；需配合content: ""、display: block、absolute定位及transform+transition才能正常工作。
input 下划线用 ::after 实现动画时，为什么没效果？
常见原因是父元素没设 position: relative，导致 ::after 脱离文档流后定位失效。伪元素默认是 position: static，必须配合 absolute 和明确的 top/left 才能压在输入框下方。
- 确保
input或其直接包装容器有position: relative -
::after必须设content: ""（哪怕为空）才能渲染 - 别忘了设
display: block或inline-block，否则高宽和动画不生效 - 动画触发依赖
transition写在伪元素上，且只对可动画属性（如width、transform、opacity）起作用
用 transform: scaleX() 做下划线伸缩比直接改 width 更稳
直接 animating width 容易引发重排（reflow），尤其在旧版 Safari 或低性能设备上卡顿明显；scaleX() 属于合成层动画，GPU 加速更可靠，且起始/结束值写 0 和 1 就行，不用算像素。
- 初始状态：
transform: scaleX(0); transform-origin: left center; - 聚焦时：
transform: scaleX(1); - 必须配
transition: transform 0.2s ease;（不能只写all） - 如果 input 有 padding，
transform-origin建议设为left center，避免缩放中心偏移
focus 状态下划线颜色/粗细突变，但 hover 也想动怎么办？
别把 :hover 和 :focus 的样式混写在一个规则里——浏览器会按声明顺序覆盖，容易误判优先级。更稳妥的是分开定义，并统一过渡属性。
- 下划线默认态：用
input:not(:focus):not(:hover)::after控制初始宽度和颜色 - hover 态：单独写
input:hover::after，只改transform或background-color - focus 态：用
input:focus::after，可叠加颜色变化 + 动画，但 transition 时间建议略长于 hover（比如0.25s） - 注意：Chrome/Firefox 对
:focus-visible支持渐进，若要兼顾键盘 focus，得额外加一层
移动端点击后下划线闪一下再动画，怎么消掉？
这是 iOS Safari 默认的「点击高亮」（tap highlight）干扰了伪元素渲染节奏，本质不是动画问题，而是视觉反馈冲突。
立即学习“前端免费学习笔记（深入）”；
- 给 input 加
-webkit-tap-highlight-color: transparent; - 确保
::after的z-index足够高（比如z-index: 2），避免被系统高亮层盖住 - 部分安卓 WebView 需要同时加
user-select: none;防止选中打断动画 - 真机调试时发现动画卡顿，优先检查是否启用了
will-change: transform—— 过度使用反而拖慢
伪元素动画看着简单，但每个浏览器对 ::before/::after 在表单控件上的渲染时机处理不同，尤其是 focus 状态切换那一帧，稍不注意就漏掉一帧动画或错位。动手前先在 Safari、Chrome Android、Firefox 上各点三次，看下划线是不是每次都从同一位置开始伸展。
