border-bottom 不支持 transform 动画，故需用 ::after 伪元素实现动态底划线；须设 position: relative 于菜单项、absolute 于 ::after，并用 transform: scalex() 配合 transform-origin 控制滑入或居中展开效果。
为什么直接用 border-bottom 做不了动态底划线
因为 border-bottom 本身不支持 transform 动画，缩放、位移、过渡都会失效。想实现“从左到右滑入”或“居中展开”的底划线效果，必须用伪元素承载可动画的层——::after 是最轻量且语义合理的选择。
常见错误是把 ::after 写在父容器（比如 nav）上，结果划线横跨所有菜单项；或者忘了设 position: absolute 和 bottom: 0，导致定位漂移。
- 必须给菜单项（如
a或li > a）设position: relative，否则::after会相对于最近有定位的祖先定位 -
::after默认是行内元素，需设display: block才能控制宽高 - 初始状态建议用
transform: scaleX(0)而非width: 0，前者更利于 GPU 加速，动画更顺
如何让底划线从左到右滑入（含 hover 过渡）
核心是控制 ::after 的宽度变化：用 transform: scaleX() 配合 transform-origin: left center，再加 transition。
a {
position: relative;
display: inline-block;
text-decoration: none;
}
a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
a:hover::after {
transform: scaleX(1);
}
注意：transform-origin 必须显式指定，否则默认是 center center，缩放会从中间向两边展开，不是“滑入”效果。
怎么实现居中展开的底划线（hover 时从文字中心向两侧伸展）
只需改两个地方：把 transform-origin 改成 center center，并确保 ::after 宽度初始为 0，但锚点在中心。
- 不要写
left: 50%再配合transform: translateX(-50%)—— 这会让scaleX锚点偏移，行为不可控 - 直接设
left: 0+width: 100%+transform-origin: center center，缩放自然以中心为轴 - 如果菜单项高度不一致，
bottom值可能需要微调（比如bottom: 2px），避免和文字贴太紧
移动端点击区域小、动画卡顿的兼容处理
iOS Safari 和部分安卓 WebView 对 transform + transition 在伪元素上的渲染有延迟或跳帧，尤其快速连续 hover 时。
- 加
will-change: transform到::after可提前提示浏览器优化渲染路径 - 避免同时动画多个属性（比如别在
::after上又动opacity又动scaleX） - 真机测试时发现点击无反应？检查是否误加了
pointer-events: none到伪元素——它默认就是none，不用加；加了反而可能干扰点击穿透 - 如果菜单项是
flex布局里的子项，注意flex-shrink: 0，防止缩放动画触发父容器重排
真正麻烦的是当菜单项带图标或行内元素混合时，100% 宽度会包含空格或换行符占位，导致划线超出文本范围——这时候得用 transform: scaleX() 配合 JavaScript 测量真实 offsetWidth，纯 CSS 就搞不定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
