核心原理是用绝对定位的::after伪元素作下划线，通过css变量（如--underline-left）动态控制其位置，配合transform: translatex()和transition实现平滑跟随动画，避免left触发重排，提升性能。
下划线跟随效果的核心原理是什么
关键在于：用一个绝对定位的 ::after 伪元素作为下划线，通过 CSS 变量（如 --underline-left）动态控制它的 left 值，并在导航项 hover 时更新该变量。浏览器会自然过渡这个变量，实现平滑位移。
不是靠 JS 计算 left 像素值再写入 style，而是让 CSS 自己“记住”每个导航项的位置并响应变化。
要点：
- CSS 变量必须在 hover 触发前就定义在元素上（比如写在
:root或父容器），否则无法被transition捕获 -
left必须配合transition: left 0.3s ease（或 transitiontransform更推荐，见下一条） - 直接过渡
left在某些布局中可能触发重排；更稳妥的是用transform: translateX()配合变量，只触发重绘
如何用 CSS 变量传递每个导航项的 left 坐标
最可靠的方式是：给每个 <li> 元素单独设置变量，hover 时读取它，再赋给下划线伪元素。
.nav-item {
--underline-left: 0;
}
.nav-item:nth-child(1) { --underline-left: 0; }
.nav-item:nth-child(2) { --underline-left: 120px; }
.nav-item:nth-child(3) { --underline-left: 240px; }
/* 手动计算或用 JS 初始化均可，但纯 CSS 场景下需预设 */
然后在下划线伪元素里用：
.nav::after {
content: '';
position: absolute;
bottom: 0;
left: calc(var(--underline-left, 0) - 50%); /* 减去自身宽度一半，实现居中对齐 */
width: 100px;
height: 2px;
background: #007bff;
transition: transform 0.3s ease;
}
注意：left: calc(...) 本身不能被 transition，所以实际应改用：
.nav::after {
transform: translateX(calc(var(--underline-left, 0) - 50%));
}
为什么用 transform 而不是 left 过渡
因为：
-
left是 layout 属性，修改它会触发浏览器重排（reflow），性能较差，尤其在高频 hover 下容易卡顿 -
transform属于合成层属性，GPU 加速友好，只触发重绘（repaint），动画更顺滑 - CSS 变量可直接用于
transform: translateX(calc(...))，现代浏览器（Chrome 73+、Firefox 63+、Safari 13.1+）都支持 - 如果需要兼容老 Safari（style 或 fallback 到 JS 实现
常见失败原因和修复点
你试了但没动？大概率掉进这几个坑：
- 伪元素没加
position: absolute，或父容器没设position: relative—— 导致left/transform失效 - CSS 变量写在
.nav-item:hover里，而不是元素默认状态 —— hover 离开后变量丢失，下划线回弹异常 - 没给
.nav::after设transition，或写在了错误的选择器上（比如只写了transition: all但没限定属性） - 导航项宽度不固定（比如文字长度差异大），手动写的
--underline-left值错位 —— 推荐用 JS 动态计算并注入变量，或改用getBoundingClientRect()+transform定位
CSS 变量传坐标这事本身不难，难的是让每个导航项的坐标值“准时、准确、可过渡”地抵达下划线。变量只是管道，真正决定效果的是位置来源是否稳定、过渡目标是否选对、以及父级定位上下文是否干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
