用 text-decoration 无法实现下划线动画，因其不支持过渡；推荐用 border-bottom 或伪元素配合 scaleX + transition-transform 实现平滑滑入效果，注意锚点、定位和缓动函数优化。
hover 下划线动画为什么用 text-decoration 不够用
直接加 hover:text-underline 没动画，因为 Tailwind 的 text-underline 对应的是 text-decoration: underline，而原生 CSS 中 text-decoration 的颜色、粗细、位置都不支持过渡（transition 无效）。你看到的“动画”其实是整个下划线突然出现/消失，没有渐变过程。
真正可过渡的方案是：用 border-bottom 或伪元素模拟下划线，再控制它的 width、transform 或 opacity。
- 推荐用
border-bottom：轻量、语义清晰、兼容性好（IE11+） - 避免用
text-decoration-color+transition：它在 Chrome/Firefox 中对text-decoration的过渡支持极差，多数情况直接忽略 - 别给
a标签直接设border-bottom后再hover:border-transparent：这样会触发重排（layout），影响性能
用 border-bottom + scaleX 实现从左到右滑入效果
核心思路是：让下划线初始宽度为 0，靠 transform: scaleX(0) 压缩隐藏；悬停时恢复为 scaleX(1)，配合 transition-transform 实现平滑伸展。
需要确保父元素有相对定位（否则 absolute 伪元素会脱离上下文），但用 border-bottom 方案可以完全避开定位问题，更稳。
立即学习“前端免费学习笔记（深入）”；
class="relative inline-block after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-blue-500 after:origin-left after:scale-x-0 hover:after:scale-x-100 transition-transform duration-300"
-
after:origin-left确保缩放锚点在左侧，否则可能居中展开 -
duration-300是合理起点，低于200ms显得突兀，高于400ms显得迟钝 - 如果文字行高不一致，
after:bottom-0可能偏高或偏低，建议改用after:bottom-[-2px]微调
响应式场景下 hover 类失效的常见原因
Tailwind 默认只在 hover 变体启用鼠标悬停类，但某些设备（如 iPad 桌面模式、折叠屏）可能同时识别触控与悬停，导致 hover:text-underline 在不该触发时触发，或在桌面浏览器中因系统设置禁用悬停而完全不生效。
- 检查是否启用了
hover变体：确认tailwind.config.js中variants包含'hover'（v3+ 已默认开启，但自定义配置可能删掉） - 移动端慎用纯
hover动画：iOS Safari 对:hover支持延迟且不可靠，建议搭配focus或点击态（如group-focus）做降级 - 不要依赖
@media (hover: hover)手动包裹：Tailwind 的hover:已自动处理该媒体查询，额外包裹反而可能导致构建时丢失类名
多个下划线动画共存时的性能注意点
大量使用 transform + transition 的伪元素，在低配安卓机或旧版 Safari 上可能引发重绘抖动，尤其当页面有几十个链接同时悬停时。
- 优先用
transform和opacity，避免触发动画属性如width、left、top（会强制重排） - 如果动画区域小（比如仅文字下方 1px 线），加
will-change: transform提前提示渲染引擎（但别滥用，每个都加反而拖慢初始化） - 测试真机：Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，悬停看是否大面积闪烁——闪得越频繁，重绘压力越大
最易被忽略的是：动画持续时间与缓动函数没对齐。比如 duration-300 搭配默认 ease，起始太慢，收尾太快，实际体验像“卡一下再弹出去”。改成 ease-out 或 ease-in-out 更自然，但 Tailwind 不提供内置类，得自己写 transition-timing-function: ease-in-out。
