纯css无法实现跨元素动态下划线滑动效果，必须用js获取目标位置并驱动共享伪元素移动；因border-bottom是静态绑定、无过渡帧，而滑动需同一节点通过transform连续位移。
纯 CSS 无法实现真正“跟随当前悬停项”的动态下划线——它只能做单个 li 内部的伸缩或展开，不能跨元素平滑位移。必须用 JS 获取目标位置，再驱动一个共享的 ::after 或 div 移动。
为什么直接用 border-bottom 做不了滑动效果
border-bottom 是绑定在单个元素上的静态边框，hover 切换时只能“消失→出现”，没有中间过渡帧。真正能滑动的，必须是同一个 DOM 节点（比如一个全局 .underline 或 nav::after），靠 transform: translateX() 连续改变位置。
- 每个导航项（如
.nav-link）必须设position: relative，否则absolute伪元素会脱标定位到body - 父容器（如
.nav）不需要额外定位，除非你要做“全局滑块”并支持点击后保持位置 - 如果导航用了
flex+justify-content: center，offsetLeft就不可靠——得用getBoundingClientRect().left算相对偏移
getBoundingClientRect() 比 offsetLeft 更可靠
当导航栏有 padding、transform、滚动或字体加载延迟时，offsetLeft 返回值会错位；getBoundingClientRect() 始终基于视口计算，结果稳定。
- 读取前确保目标元素已渲染完成（避免在
DOMContentLoaded之前调用） - 不要在
mouseenter回调里反复读取——缓存一次，后续复用left和width - 移动端需注意：iOS Safari 中若未加
-webkit-tap-highlight-color: transparent，灰色遮罩可能干扰动效感知
transform: translateX() 替代 left 的真实原因
改 left 会触发重排（reflow），动画卡顿；transform 只走合成层，启用硬件加速，顺滑得多。
- 初始状态建议写
transform: translateX(-100%)隐藏，避免页面加载瞬间闪一下 -
transition必须写在伪元素上，且只声明要动的属性：transition: transform 0.3s ease-out - 别用
transition: all——它会拖慢渲染，还可能意外触发 layout 变化 - 如果下划线要从中心展开，用
transform: scaleX(0)+transform-origin: center比控制width更高效
移动端点击无响应？检查 pointer-events 和层叠顺序
::after 默认 pointer-events: auto，如果它盖住了底层 a 标签，就会导致 tap 失效或延迟。
- 确保伪元素不遮挡点击热区：不要给它设
height超出文字行高，否则会撑开误触区域 - 加
z-index: 1显式提层，避免被背景色、阴影或opacity 的父容器意外压住 - 若父容器用了
transform、filter或opacity ，会创建新层叠上下文——此时 <code>::after的定位参照系就变了，得重新校准
最麻烦的从来不是写动画，而是让那条小横线在各种缩放、滚动、flex 换行、字体加载延迟的情况下，始终稳稳贴在目标文字正下方。这一步，CSS 做不到的部分，JS 必须补上——而且得避开强制同步布局（比如在循环里频繁读 getBoundingClientRect()）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
