如何通过CSS和::after伪元素结合transform实现导航栏悬浮动态下划线效果？

本文共计1003个文字，预计阅读时间需要5分钟。

直接输出结论：

常见错误是只写 scaleX(0) → scaleX(1)，结果线条从左往右拉伸——因为默认变换原点（transform-origin）在左侧。必须显式设为 center 或 50% 100% 才能居中展开。

• position: relative 必须加在导航项（如 <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 轴在底部边缘，确保缩放始终以底线中点为轴心展开。