伪元素 ::after 实现下划线需为 li 设置 position: relative 作为定位上下文，::after 设 absolute + bottom: 0，并用 transform: translatex() 和 width 动态控制位置与尺寸；js 获取 offsetleft/offsetwidth 并取整，配合 transition 和 will-change 优化动画，同时确保正确切换 active 类及层叠上下文。
伪元素 ::after 必须配合 position: relative 容器使用
直接给 li 或 a 加 ::after 却没设定位上下文，下划线会相对于整个页面或最近的定位祖先偏移，完全不跟手。必须确保选项卡项（比如 li）自身有 position: relative，这样 ::after 才能以它为参考系做精确位移。
常见错误是只给父容器（如 ul）设 relative，结果所有 ::after 都挤在左上角；或者忘了加，导致 left/bottom 值失效。
-
li元素需显式声明position: relative -
::after设position: absolute，并用bottom: 0锚定到底部 - 避免在
a标签上同时设relative和::after，易引发层级或尺寸计算干扰
下划线宽度和位移必须用 transform: translateX() 动态控制
用 left + width 硬调位置，在 Tab 数量变化、文字长度不均或响应式缩放时极易错位。正确做法是让下划线初始宽度为 0、left: 0，再通过 JS 获取当前激活项的 offsetLeft 和 offsetWidth，用 transform: translateX(npx) 移动，同时设置 width 为对应值。
关键点在于：位移只负责水平定位，不参与布局流；translateX 比修改 left 更高效，且不会触发重排。
- JS 中应监听点击，获取
target.parentElement（即li），再读offsetLeft和offsetWidth - CSS 中
::after的transition: transform 0.2s, width 0.2s保证平滑过渡 - 别用
getBoundingClientRect()替代offsetLeft，它受滚动、缩放影响，容易抖动
激活状态切换时要注意 z-index 和层叠上下文
如果下划线被其他元素（比如相邻 li 的边框、阴影，或父容器的 overflow: hidden）遮挡，说明层叠顺序没理清。伪元素默认和宿主元素同层，但一旦宿主触发了新的层叠上下文（如设置了 opacity 、<code>transform、filter），::after 就会被困在里面，无法盖过兄弟元素。
- 确保所有
li的z-index一致（默认 auto），不要给非激活项设z-index: -1这类破坏性操作 - 下划线伪元素可加
z-index: 1，但前提是其宿主li没创建孤立层叠上下文 - 检查父
ul是否有overflow: hidden且高度不足——这会直接裁掉::after
移动端触摸和 Safari 下 transform 位移偶尔跳变
Safari 对 transform 的像素对齐更敏感，尤其在 Retina 屏或 zoom 不为 100% 时，translateX(123.456px) 可能渲染成模糊或跳帧。解决方案是强制取整，并加 will-change: transform 提示渲染引擎优化。
- JS 中计算位移时用
Math.round(el.offsetLeft)，宽度同理 - CSS 中给
::after加will-change: transform（仅在需要动画时启用，避免滥用） - 避免在
::after上同时用scaleY()和translateX()，Safari 旧版本可能合成异常
active 类，否则多个 li 同时带 class，JS 读取 offsetLeft 会取第一个，导致下划线始终停在第一个位置。这个逻辑不在 CSS 范畴，但一漏就全崩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
