下划线不能直接用 border-bottom 动画，因其不支持 transform 且无法独立过渡；应使用伪元素 + transform: translatex() 实现硬件加速动画，left 仅作基准定位，避免重排确保 60fps。
下划线为什么不能直接用 border-bottom 动画？
因为 border-bottom 本身不支持 transform，也不能对单个边做独立过渡；强行给 border-bottom 加 transition 只会触发重排，且无法精准控制起点/终点位置。真正平滑、可复用的方案必须基于一个独立的、可位移的元素（比如伪元素或空 <span></span>），再配合 transform: translateX() 实现硬件加速动画。
用 ::after 伪元素 + translateX() 控制位移
核心思路：在标签容器（如 .tabs）上设相对定位，在其内部用 ::after 绘制一条下划线，并通过 JS 或 CSS 变量动态设置它的 left 和宽度，再用 transform: translateX() 做最终微调——这样能规避 layout 触发，保证 60fps。
- 伪元素必须设
position: absolute、bottom: 0、height: 2px，且父容器需有position: relative - 位移起点由
left决定（对应当前激活 tab 的左偏移），但仅靠left过渡会有卡顿；应把主要位移逻辑交给transform: translateX()，left只负责“锚定基准” - 推荐结构：
<div class="tabs" style="--tab-index: 1"> <button>Home</button><button>About</button> </div>，然后用calc()结合 CSS 变量算出目标left
.tabs {
position: relative;
display: flex;
}
.tabs::after {
content: '';
position: absolute;
bottom: 0;
height: 2px;
background: #007bff;
width: 80px;
left: calc(var(--tab-index, 0) * 100px); /* 假设每个 tab 宽 100px */
transform: translateX(0);
transition: left 0.3s ease, transform 0.3s ease;
}
如何用 CSS 变量驱动不同 tab 宽度与位置？
硬编码 left: calc(var(--tab-index) * 100px) 只适用于等宽 tab。真实项目中 tab 文字长度不一，需要 JS 测量并注入变量，或改用更健壮的定位方式：让每个 <button></button> 自带 --offset 和 --width，再由伪元素读取。
- JS 注入示例：
tabBtn.style.setProperty('--offset', tabBtn.offsetLeft + 'px')、tabBtn.style.setProperty('--width', tabBtn.offsetWidth + 'px') - CSS 中伪元素改写为：
left: var(--offset, 0); width: var(--width, 80px)，不再依赖索引计算 - 若想完全零 JS，可用
:has(> button[aria-selected="true"])配合兄弟选择器 + 多组::after（但兼容性差，仅限现代浏览器） - 注意：CSS 变量不能直接参与
calc()中的单位运算（如calc(var(--offset) + 10px)是合法的，但calc(var(--offset) * 2)不行）
为什么 transform: translateX() 比 left 更可靠？
因为 transform 属于合成层属性，浏览器会将其提升到独立图层，动画不触发重排（reflow）和重绘（repaint），只做复合（composite）。而 left 改变会强制浏览器重新计算布局，尤其在频繁切换时容易掉帧。
- 实操建议：把位移主逻辑全交给
transform，left仅用于初始对齐（例如设为0，再用transform: translateX(calc(...))移动） - 避免同时过渡
left和transform，否则动画曲线可能冲突；选一个为主，另一个固定 - 移动端要注意：部分老安卓 WebView 对
transform的 subpixel 渲染有偏差，可加will-change: transform提前提示
真实项目里最容易被忽略的是 tab 元素宽度动态变化（比如响应式缩放、字体加载延迟、国际化文本变长）导致 --offset 失效。别只测初始渲染，记得监听 resize 和 fontload 后重新测量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
