CSS伪元素模拟输入框的自定义下划线动画

下划线用::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 上各点三次，看下划线是不是每次都从同一位置开始伸展。