因为border-bottom是静态边框无法独立运动，而滑动效果需同一DOM节点（如::after）通过transform:translateX()连续改变位置实现，且必须配合relative/absolute定位、transition及z-index等细节处理。

为什么直接用 border-bottom 做不了滑动效果

因为 border-bottom 是绑定在单个元素上的静态边框，无法脱离当前 a 标签独立运动。你 hover 到另一个菜单项时，旧的边框只能消失、新的边框只能出现——没有“移动”这个中间状态。真正能做滑动的，必须是同一个 DOM 节点（比如一个共享的 ::after），它的位置或尺寸被连续改变。

::after 伪元素必须配合 position: relative 和 position: absolute

否则下划线会脱标、错位甚至不可见。关键定位组合是：

• 每个导航项（如 .nav-link）设 position: relative，作为伪元素的定位上下文
• 伪元素本身设 position: absolute，bottom: 0，left: 0，再用 transform: translateX() 控制水平偏移
• 父容器（如 .nav）不需要额外定位，除非你要做“全局滑块”跟随点击切换

用 transform: translateX() 而不是 left 的真实原因

改 left 会触发浏览器重排（reflow），动画卡顿；而 transform 只走合成层，启用硬件加速，顺滑得多。实操中要注意：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 初始 transform: translateX(-100%) 是为了隐藏它，避免页面加载瞬间闪一下
• hover 时不能只写 transform: translateX(0)，得配合 transition: transform 0.3s ease-out 写在伪元素上
• 如果导航项宽度不一致，纯 CSS 无法自动对齐——此时 translateX() 值必须靠 JS 动态读取 getBoundingClientRect().left 计算

移动端适配和容易忽略的层叠问题

下划线消失或跳位，八成是 z-index 或层叠上下文搞错了。常见坑点：

立即学习“前端免费学习笔记（深入）”；

• 伪元素没加 z-index: 1，被其他元素（比如背景色、阴影）盖住
• 父容器用了 transform、filter 或 opacity < 1，意外创建了新层叠上下文，导致 ::after 定位参照系偏移
• 在 flex 布局里，justify-content: center 会让所有项居中，但 translateX() 仍以父容器左边缘为原点——这时得用 getBoundingClientRect() 算相对偏移，不能硬写固定值

实际最麻烦的从来不是写动画，而是让那个小横线在各种缩放、滚动、flex 换行、字体加载延迟的情况下，始终稳稳贴在目标文字正下方。这一步，CSS 做不到的部分，JS 必须补上。