不能用 hover:text-underline 实现真正动画，因其依赖的 text-decoration 不支持过渡；推荐用 ::after 伪元素配合 width 和 transition-width 实现平滑下划线动画。
不能用 hover:text-underline 实现真正动画——它只是切换 text-decoration: underline，而该属性不支持过渡，浏览器直接硬切，毫无滑入感。
为什么 text-underline 加 transition 没用
因为 text-decoration 的颜色、位置、粗细在绝大多数浏览器中无法被 transition 捕获。你加了 transition-all 或 transition-text-decoration，Chrome/Firefox 都会静默忽略。实测中，哪怕只改 text-decoration-color，动画也基本不触发。
- 别试
hover:text-underline hover:text-blue-500+transition-color：颜色变，下划线还是“啪”一下出现 - 别依赖
text-underline-offset动画：目前仅 Safari 16.4+ 支持，且不兼容transition -
text-decoration是复合属性，CSS 规范明确不将其列为可动画属性
用 ::after 伪元素 + width + transition-width
这是最可控、兼容性好（IE11+）、无需 JS 的方案。核心是让伪元素初始 width: 0，悬停时变为 width: 100%，靠 transition-width 插值。
-
a必须加relative，否则::after会相对 body 定位 -
::after要设content: ''，否则不渲染 - 推荐用
bottom: -2px控制下划线离文字的距离，比border-bottom更灵活 - 动效更顺的写法：
transition-width duration-300 ease-out，避免ease-in开头太慢
对应 Tailwind 写法示例：
立即学习“前端免费学习笔记（深入）”；
<a href="#" className="relative text-blue-600 no-underline hover:text-blue-800"> Link Text <span className="absolute bottom-[-2px] left-0 w-0 h-0.5 bg-blue-600 transition-all duration-300 ease-out group-hover:w-full"></span> </a>
用 border-bottom + scaleX 更轻量但有约束
如果不想用伪元素，border-bottom 是更轻量的选择，但必须配合 transform: scaleX(0) → scaleX(1)，因为 border-bottom-width 本身不可过渡（只有 width/height/color 可，但 color 不影响线型）。
- 给
a加relative+border-b-0，再用before或内联span承载 border - 绝对不能写
hover:border-b-transparent：透明色和非透明色之间切换会触发 layout，性能差 - 要确保
transform-origin: left center，否则缩放中心偏移，动画歪斜 - 移动端慎用：部分 iOS Safari 对
scaleX在 inline 元素上渲染不稳定
别漏掉这些细节
真实项目里最容易栽在定位和继承上：父容器如果有 overflow-hidden，伸展的下划线会被裁掉；a 如果用了 flex items-center，align-items: center 会让 absolute 子元素垂直偏移；React 中若用 Link（如 React Router），需确保 className 正确透传到原生 a 标签，否则 relative 失效。
