伪元素::after必须设为position: absolute并配合父容器position: relative，否则边框位置飘忽、宽度不准、动画跳变；过渡应使用transform而非left/right，hover须绑定父元素，且需真机测试。
伪元素 ::after 必须设为 position: absolute
不绝对定位的话，::after 会占据文档流，边框位置飘忽、宽度算不准，过渡还容易跳变。父容器得配 position: relative，不然绝对定位会往上层找参考系，一动就偏。
常见错误是只写了 content: "" 和 height，但没加定位，结果边框根本不出现在底部，或者随文字换行乱跑。
- 父元素必须声明
position: relative -
::after要写position: absolute; bottom: 0; left: 0; right: 0; -
width别设固定值，用left/right控制更稳
过渡只能作用于 transform 或 width，不能直接过渡 left/right
想让边框从左滑入？别碰 left 和 right——它们无法硬件加速，动画卡顿，且 Safari 下常失效。正确做法是用 transform: scaleX(0) → scaleX(1)，或者控制 width + transform-origin。
用 width 更直观，但要注意：如果父容器有 padding，width: 100% 会撑出滚动条；用 transform 更安全，兼容性也更好（IE10+ 支持）。
- 推荐写法：
transform: scaleX(0); transform-origin: left;→ hover 时transform: scaleX(1) - 过渡属性必须明确写成
transition: transform 0.3s ease，不能只写transition: all - 别在
::after上设display: none，它会让 transition 失效；用opacity: 0或scaleX(0)替代
hover 触发源必须是父容器，不是伪元素本身
::after 是伪元素，没有事件能力。如果你给 ::after 写 hover，CSS 根本不会响应。所有交互逻辑必须绑定在真实元素上，比如 a、button 或带 class 的 div。
另一个坑是：父容器没设 overflow: hidden，transform: scaleX() 动画过程中可能轻微溢出，尤其在高 DPI 屏幕上出现毛边。
- hover 写在父选择器上，例如
.link:hover::after，不是.link::after:hover - 父容器建议加
overflow: hidden防边缘渲染异常 - 如果父容器是 inline 元素（如
span），先加display: inline-block，否则position: relative不生效
移动端点击区域和伪元素触发延迟
iOS Safari 对伪元素的点击响应有约 300ms 延迟，且伪元素本身不扩大可点击区域。用户点到边框下方空白处，hover 效果不触发——因为实际触发的是父容器的 padding-bottom 区域，而非视觉上的“边框”。
解决办法不是加 touch-action，而是确保父容器点击热区足够大，并把交互逻辑下沉到真实 DOM 节点上。另外，transform 在某些安卓 WebView 中需加 will-change: transform 防闪烁，但别滥用，它会提前创建图层，吃内存。
- 父容器最小高度建议 ≥ 44px（符合 iOS 可点击区域规范）
- 慎用
will-change: transform，仅在动画明显掉帧时加 - 真机测试必做：Chrome DevTools 的「Toggle device toolbar」模拟不了真实触摸延迟，得上真机点几次
过渡效果看着简单，但真正稳定跨端跑起来，关键不在怎么动，而在怎么“不意外”——定位基准、触发层级、渲染上下文，三者错一个，边框就滑到屏幕外或者干脆不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
