纯CSS实现导航栏滑动下划线需用::after伪元素+transform+transition，设a为position:relative，伪元素初始width:0、translateX()定位，过渡写在伪元素上；JS版则需用getBoundingClientRect动态计算激活项位置并更新下划线。
怎么用 CSS 实现导航栏滑动下划线（不依赖 JavaScript）
纯 CSS 就能做，关键在 transform + ::after 伪元素 + transition。不需要监听点击或计算位置，靠 :hover 和兄弟选择器触发位移即可。
常见错误是直接给 a 加 border-bottom，结果无法滑动；或者用 position: absolute 写死位置，一换菜单项就错位。
- 下划线必须作为独立伪元素存在，且初始
width: 0、transform: translateX()定位 - 每个导航项需设
position: relative，让伪元素能相对它定位 - 过渡要写在伪元素上，不是
a上：否则 hover 瞬间跳变，没滑动效果 - 如果导航项宽度不一致（比如文字长短不同），得用
width: max-content或 JS 补齐——纯 CSS 只能保证“同宽菜单”平滑切换
JavaScript 版滑动下划线怎么精准对齐当前激活项
当需要高亮当前路由（比如 SPA 页面切换后保持下划线在对应菜单上），CSS :hover 失效，必须用 JS 控制 transform 和 width。
核心是获取目标 a 的 offsetLeft 和 offsetWidth，再赋给下划线容器。容易踩的坑是：没等 DOM 渲染完就读尺寸、忽略滚动容器偏移、没处理 resize 重算。
立即学习“前端免费学习笔记（深入）”；
- 下划线容器建议单独加一个
<span class="underline"></span>放在导航外层，避免干扰布局流 - 用
getBoundingClientRect()比offsetLeft更可靠，尤其导航在 flex 或有 padding 的父容器里 - 首次渲染后调用一次定位逻辑，后续路由变化时只更新，别重复绑定事件
- 如果导航栏固定定位或有横向滚动，记得减去
window.scrollX或容器scrollLeft
为什么 transform: translateX() 比 left 更适合做滑动动画
因为 transform 触发 GPU 加速，动画更顺；而 left 触发 layout + paint，尤其在低端设备上卡顿明显。实测帧率差 20–30 FPS。
另一个关键是：用 translateX() 移动下划线时，不用改它的 left 值，也就不会和父容器的 position: relative 冲突；同时能配合 scaleX() 实现宽度伸缩动画（比如从窄到宽展开）。
- 务必给下划线元素加
will-change: transform，提前提示浏览器优化 - 不要同时写
transform: translateX() scaleX()和width动画——两者作用重叠，反而导致抖动 - 移动端要注意
transform在 Safari 旧版本里需加-webkit-transform前缀（iOS 12 及以下）
React/Vue 项目里怎么复用滑动下划线组件
重点不是封装多 fancy 的 API，而是把「位置计算」和「DOM 引用」解耦。React 用 useRef 拿导航项，Vue 用 template ref，都别用 document.querySelector。
复杂点在于：SSR 渲染时没有 DOM，offsetLeft 会是 0；还有服务端渲染后客户端 hydrate 的时机问题。
- React 中在
useEffect里计算位置，且加if (typeof window === 'undefined') return防 SSR 报错 - Vue 3 推荐用
onMounted+nextTick确保 DOM 已挂载再读尺寸 - 别把下划线逻辑塞进每个菜单项组件里——统一由导航容器控制，降低重绘范围
- 如果菜单动态增删（比如权限过滤后隐藏某项），要重新触发位置计算，不能只依赖 mounted 一次
最易被忽略的是响应式断点：PC 端显示完整导航带滑动线，移动端收起为 hamburger 菜单后，下划线逻辑应完全关闭——否则在折叠状态还试图计算不存在的 DOM 尺寸，会报 Cannot read property 'getBoundingClientRect' of null。
