下划线位置不准的根本原因是left基准错误；应改用transform: translateX()配合getBoundingClientRect()动态计算偏移，或把::after放在每个内用left: 0 + width: 100%并配合overflow: hidden控制显示范围。
下划线位置始终对不准？检查 left 基准是否用对了
直接用 left: 0 或 left: 50% 很容易让下划线偏移——因为 left 是相对于父容器左边缘计算的，而导航项宽度不一、有 padding 或 margin 时，基准就乱了。真正该用的是 transform: translateX() 配合 getBoundingClientRect() 动态算偏移，或者退一步：把伪元素放在每个 <a></a> 内部，用 left: 0 + width: 100%，再靠父级 overflow: hidden 控制显示范围。
- 若用全局单一下划线（一个
::after挂在<nav></nav>上），必须用 JS 获取当前激活项的offsetLeft和offsetWidth，再设left和width - 若纯 CSS 实现，推荐把
::after放在每个<a></a>里，hover 时用transition动画其opacity或transform，避免 left 计算 - 注意：
position: relative必须加在导航项（<a></a>或<li>）上，否则absolute伪元素会相对定位
transition 不生效？确认触发属性和 timing-function
只写 transition: left .3s 是不够的。left 属于“非可动画属性”，浏览器需要明确知道起始值和结束值，且不能是 auto。常见失效原因：初始状态没设 left（比如只在 hover 里设，没在默认样式里声明），或用了 display: none 切换（display 不可过渡）。
- 务必在默认状态定义
left和width，例如：left: 0; width: 0; transition: left .3s ease, width .3s ease; - 避免用
transition: all—— 它会拖慢渲染，且可能意外触发 layout 变化 - 如果下划线要从中心展开，用
transform: scaleX(0)+transform-origin: center更稳妥，比width更高效
移动端点击无响应？::after 覆盖了点击区域
伪元素默认 pointer-events: auto，如果它盖住了 <a></a> 的可点击区域（尤其设置了 z-index 或大尺寸 height），会导致 tap 失效或延迟。这不是 bug，是层叠顺序问题。
- 给伪元素加
pointer-events: none，确保点击穿透到底层链接 - 不要给
::after设height超出文字行高，否则会撑开点击热区、引发误触 - 在 iOS Safari 上测试时，记得加
-webkit-tap-highlight-color: transparent避免灰色遮罩干扰动效感知
JS 动态更新时 left 值跳变？避免强制同步布局
每次读取 offsetLeft 或 getBoundingClientRect() 都会触发重排（reflow），如果在循环或快速切换中频繁调用，下划线就会卡顿甚至错位。关键不是“怎么算”，而是“什么时候算”。
- 用
requestAnimationFrame包裹获取逻辑，把读取和写入分到不同帧 - 缓存上一次的
left和width值，仅当 DOM 尺寸真正变化时才更新（可用 ResizeObserver 监听导航项） - 如果只是菜单切换，优先用 CSS class 切换 +
data-active属性驱动，减少 JS 干预
最麻烦的不是写动效，是处理不同字体加载、动态插入菜单项、以及 Safari 对 transform 过渡的渲染抖动——这些地方没日志也看不出问题，得靠肉眼逐帧观察。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
