输入框获得焦点时边框线从中展开需用:focus配合绝对定位::after，设width:0、left:50%、transform:translateX(-50%)scaleX(0)，聚焦时仅变scaleX(1)；须设父元素position:relative，优先用scaleX而非width以避免重排、适配圆角且更顺滑；伪元素贴底靠bottom与padding-bottom匹配或微调translateY；收起动画需统一transition于::after上，并兼顾移动端响应。
输入框获得焦点时边框线从中间向两侧展开
直接用 :focus 配合 ::after 伪元素做宽度动画，关键在伪元素必须是绝对定位、初始宽度为 0、左右居中，再通过 transform: scaleX(0) + transform-origin: center 控制缩放起点。否则容易出现偏移或闪烁。
常见错误是把 ::after 宽度设成 100% 后用 left: 0 拉伸——这样动画会从左往右“滑”，不是“从中展开”。正确做法是：
-
::after宽度设为0，left: 50%，transform: translateX(-50%) scaleX(0) -
:focus::after中只改transform: translateX(-50%) scaleX(1)，不碰width或left - 必须给父
input设position: relative，否则::after的绝对定位会脱出上下文
为什么用 scaleX 而不是 width 动画
width 变化会触发重排（reflow），尤其在旧版 Safari 或低性能设备上容易卡顿；scaleX 属于合成属性，走 GPU 加速，动画更顺滑。而且 scaleX 天然以中心为原点，省去手动算偏移的麻烦。
注意：如果 input 本身有圆角（border-radius），scaleX 不会影响圆角渲染，但 width 动画可能让边框线在展开初期露出尖角。
兼容性上，scaleX 在 IE10+、所有现代浏览器都支持；若需支持 IE9，得回退到 width + left 组合，但必须加 will-change: width 提前提示渲染引擎。
::after 边框线高度和颜色怎么对齐输入框底部
伪元素默认顶对齐，要让它贴底，不能只靠 bottom: 0 —— 因为 input 的 line-height、padding-bottom、字体大小都会影响基线位置。稳妥做法是：
- 给 input 设
box-sizing: border-box和明确的height（如40px） -
::after设bottom: 0+height: 2px（或你想要的粗细） - 若 input 有
padding-bottom: 8px，则::after改为bottom: 8px，数值必须和实际内边距一致 - 颜色建议用
currentColor，这样换主题色时不用单独改伪元素颜色
失去焦点后边框线如何收回去
别只写 :focus::after，必须显式定义非聚焦态的 ::after 样式，否则动画会突兀跳回。重点是两处 transition 要一致：
- 在
input::after上统一写transition: transform 0.3s ease - 不要在
:focus::after里重复写 transition，否则可能被覆盖或叠加 - 如果希望收起更慢（比如展开 0.3s，收回 0.4s），就拆成两个声明：
input::after { transition: transform 0.3s ease; }和input:focus::after { transition-duration: 0.3s; }，收回会沿用原声明
另外，移动端键盘收起时 focus 状态有时延迟消失，可加 @media (hover: none) { input::after { transition-duration: 0.15s; } } 优化触屏响应。
真正难调的是不同字体下 baseline 的微小差异，尤其是用了自定义字体时，bottom 值可能差 1px —— 这时候宁可用 transform: translateY(1px) 微调，比硬调 bottom 更稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
