纯css无法实现真正自适应宽度的下划线滑块跟随效果，因其不能跨元素读取运行时尺寸、响应dom更新或字体加载；所有“纯css跟随”实为伪跟随，必有断层。

纯 CSS 无法实现真正自适应宽度的下划线滑块跟随效果——它做不到跨元素读取运行时尺寸、无法响应 DOM 更新或字体加载，所有“纯 CSS 跟随”方案本质都是伪跟随：每个导航项独立触发自己的 ::after，中间必有断层。

为什么 left + width 定位一定会错位

直接用 left: 20px; width: 80px 写死值，或依赖 offsetLeft 计算，在以下场景全部失效：

• 导航项用 flex 布局，offsetLeft 不反映视觉位置
• 文字换行、系统字号缩放、字体加载完成，导致实际宽度突变
• 父容器有 padding 或 transform，offsetParent 参照系偏移
• 滚动后视口坐标变化，但 left 值没重算

必须用 getBoundingClientRect() 获取视觉坐标

滑块定位的唯一可靠依据是浏览器渲染后的视觉矩形。关键不是“获取目标位置”，而是“减去容器偏移”：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 先调 target.getBoundingClientRect() 得到目标项在视口中的 left 和 width
• 再调 container.getBoundingClientRect()，用 target.left - container.left 算出容器内相对横坐标
• 若滑块需居中对齐，位移值 = target.left - container.left + target.width / 2 - slider.offsetWidth / 2
• 务必在 requestAnimationFrame 中更新 style.transform，避免强制同步布局

滑块 DOM 结构和 CSS 的硬性要求

结构错一步，JS 算得再准也白搭：

• 滑块元素（如 <div class="nav-underline"></div>）必须和导航项同级，且包裹在同一 position: relative 容器下
• 滑块自身设 position: absolute; bottom: 0; height: 2px;，禁用 left 和 width 的 inline style
• 只通过 transform: translateX() 控制水平位置，用 width 控制长度（可选，也可用 scaleX()）
• 监听 resize、orientationchange、DOM 变更（如 Vue nextTick 或 MutationObserver）后重新计算

最容易被忽略的是：滑块初始位置不能靠 CSS 设 left: 0 占位，而要在 JS 初始化时就调一次 getBoundingClientRect() 并设置；否则首次渲染时它会卡在左上角，直到第一次 hover 才跳过去。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！