真正实现hover下划线滑动需用::after伪元素配合transform: translatex()和width过渡，而非border-bottom；须设position: relative定位父元素，transition写在正常态，兼顾触摸设备降级与overflow处理。
hover时下划线从左到右平滑滑动
直接用 border-bottom 配合 transition 不行——它只能渐变颜色或粗细，没法“滑动”。真正能动的是 ::after 伪元素，靠 transform: translateX() 控制位置。
常见错误是给 a 元素本身加 transition，结果 hover 一触发就整个下划线闪现，没滑动感。必须把下划线抽成独立伪元素，初始设为 width: 0、transform: translateX(0)，再在 hover 里展开并位移。
- 用
position: relative给菜单项（如a或li > a）定位，让伪元素能绝对定位对齐 -
::after必须设content: ""、display: block、height和background-color - 过渡要写在正常态（非 hover）上：
transition: transform 0.3s ease, width 0.3s ease，否则第一次 hover 没动画 - 别忘了加
will-change: transform（可选），避免某些浏览器重绘卡顿
li > a {
position: relative;
}
li > a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: transform 0.3s ease, width 0.3s ease;
}
li > a:hover::after {
width: 100%;
transform: translateX(0);
}
hover时下划线从中心向两边展开
本质还是控制 ::after 的 transform，但初始状态改成 width: 0; left: 50%; transform: translateX(-50%)，hover 时宽度撑满、同时取消位移。
容易踩的坑是忘记重置 transform：如果 hover 里只写 width: 100%，伪元素会卡在居中起点不动；必须显式写 transform: translateX(0) 才能释放位移约束。
- 初始
left: 50%+transform: translateX(-50%)确保伪元素中心对齐文字中心 - hover 中
width: 100%和transform: translateX(0)要同时出现，缺一不可 - 若菜单项宽度不固定（比如响应式布局），这种写法比“从左到右”更稳定，因为不依赖左边界锚点
移动端 hover 失效导致滑动效果不触发
CSS :hover 在多数触摸设备上默认不触发，尤其 iOS Safari 和 Android Chrome 的非模拟模式。这不是 bug，是规范行为——触摸没有“悬停”概念。
真机测试时发现菜单项点了才动一下、松手就回弹，大概率就是这个原因。不能靠加 @media (hover: hover) 来修复，那只是媒体查询，不解决交互逻辑。
- 最稳妥做法：放弃纯 CSS hover 动画，改用 JS 监听
touchstart+touchend模拟 hover 状态（例如加 classis-hovered） - 次选方案：对触摸设备降级为点击激活（
:active），但:active只在按下瞬间生效，需配合transition延长视觉反馈 - 别用
pointer-events: none或cursor: pointer试图“骗过”浏览器，无效
过渡时间太短或 easing 不匹配导致滑动生硬
0.1s 的 transition-duration 看起来像瞬移；用 ease-in-out 对线性滑动反而突兀。滑动类动画更适合 cubic-bezier(0.34, 1.56, 0.64, 1) 这种轻微缓出+缓入的曲线，模拟物理惯性。
另一个隐藏问题是父容器有 overflow: hidden 却没预留空间——伪元素滑动时被裁掉半截，以为动画失败，其实是布局问题。
- 推荐起始值：
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) - 检查父元素是否设置了
overflow: hidden，如有，确保伪元素区域在可视范围内（比如加padding-bottom或调整bottom值） - 不同浏览器对
transform的硬件加速支持不一，iOS Safari 有时需要加transform: translateZ(0)强制启用
伪元素滑动看着简单，实际要同时稳住定位、过渡、设备兼容和性能四条线。最容易漏的是 touch 设备的 fallback 和父容器的 overflow 控制——这两处一错，效果就全废。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
