用::after伪元素实现导航栏下划线平滑缩放动画：设transform: scaleX(0)初始态、transform: scaleX(1)激活态，配合transform-origin: 50% 100%居中底边展开，transition写在默认样式中确保首帧动画，并用left: 0; right: 0替代width控制宽度。
导航栏下划线如何用 ::after 实现平滑缩放动画
直接结论：用 ::after 伪元素生成下划线，配合 transform: scaleX(0) 初始状态 + transform: scaleX(1) 激活态，再加 transition 控制缩放过程，就能做出悬浮时从中间向两边展开的动态效果。关键不在“画线”，而在“控制锚点+缩放原点”。
常见错误是只写 scaleX(0) → scaleX(1)，结果线条从左往右拉伸——因为默认变换原点（transform-origin）在左侧。必须显式设为 center 或 50% 100% 才能居中展开。
-
position: relative必须加在导航项（如<a></a>或<li>）上，否则::after的绝对定位会脱离上下文 -
::after需设content: ""、display: block、height和background-color，否则不可见 - 推荐用
transform: scaleX(0)而非width: 0，前者触发 GPU 加速，动画更顺；后者可能触发重排
为什么 transform-origin: 50% 100% 比 center 更稳妥
导航项高度不固定时（比如文字行高变化、多行文本），center 会让下划线垂直居中，但我们需要它紧贴文字底部。所以 transform-origin: 50% 100% 明确指定 X 轴居中、Y 轴在底部边缘，确保缩放始终以底线中点为轴心展开。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
::after设bottom: 0（而非top: 100%），避免因父容器padding或line-height导致位置偏移 - 若导航项有内边距（
padding），::after的left和right应设为0，让它撑满可用宽度，再靠transform-origin控制缩放起点 - 不要依赖
width: 100%—— 缩放时它会和transform冲突；统一用left: 0; right: 0;配合transform: scaleX()
transition 写在哪？为什么不能只写 transform
必须把 transition 写在 ::after 的默认样式里，而不是 hover 状态中。否则第一次悬停会无动画（浏览器没记录初始 transform 值）。
性能与兼容性注意点：
- 只过渡
transform和opacity，避免过渡width、left等触发布局计算的属性 - 加
will-change: transform可提前提示浏览器优化（但别滥用，仅对高频动画元素加） - 旧版 Safari 对
transform-origin在伪元素上的支持不稳定，若需兼容 iOS transform-origin: center bottom
示例关键片段：
a {
position: relative;
padding: 12px 16px;
}
a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: #007bff;
transform: scaleX(0);
transform-origin: 50% 100%;
transition: transform 0.3s ease;
}
a:hover::after {
transform: scaleX(1);
}
多个导航项同时 hover 时下划线互相干扰怎么办
这是实际项目中最容易被忽略的点：如果导航项共用同一套 CSS，且未隔离作用域，当鼠标快速扫过相邻项时，::after 的 transform 动画可能因前一个 hover 未结束就被中断，出现“缩放卡顿”或“残留半截线”。
解决思路不是加延迟，而是确保每个项的动画独立完成：
- 给
::after加transition-behavior: allow-discrete（目前仅 Chrome 支持，慎用） - 更通用的做法：用
transition: transform 0.3s ease-out+transition-delay: 0.05s在 hover 态，让进入稍缓、退出稍快，减少冲突 - 终极方案：改用
@keyframes+animation，配合animation-fill-mode: forwards，但会增加维护成本
复杂点在于，视觉上要“流畅”，背后得平衡动画队列、浏览器渲染帧率和用户操作节奏——多数时候，调好 ease-out 曲线比强行同步更可靠。
