text-decoration 不支持 transition，应改用 border-bottom 或 ::after 伪元素实现可动画下划线；伪元素方案通过 width 过渡实现从左到右滑入，需设置 position: relative 和显式 width: 0。
用 text-decoration 配合 transition 行不通
直接给 a 元素加 text-decoration: underline 再设 transition: text-decoration 0.3s，浏览器根本不触发过渡——text-decoration 是 CSS 中少数不支持过渡的属性之一，连 Chrome 和 Firefox 都不认这个组合。
真正能过渡的只有颜色、宽度、位移、透明度等可计算中间值的属性。所以得绕开 text-decoration，改用其他可动画的手段模拟下划线。
用 border-bottom 实现可过渡的下划线
这是最常用也最稳妥的做法：把下划线当成元素底部的一条边框来控制。
- 初始状态设
border-bottom: 2px solid transparent（透明边框占位，避免文字跳动） - 悬停时改为
border-bottom-color: currentColor或具体颜色 - 必须显式声明
transition: border-bottom-color 0.3s ease，只写transition: all容易引发意外重绘 - 如果希望“从左到右展开”，得配合
background-image+background-size，但更推荐下面的伪元素方案
用 ::after 伪元素做可控展开动画
要实现真正意义上的“下划线从无到有、从左向右滑出”，伪元素是唯一可靠方式：
a {
position: relative;
color: #333;
}
a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: currentColor;
transition: width 0.3s ease;
}
a:hover::after {
width: 100%;
}
关键点：
- 必须设
position: relative在父元素上，否则::after的absolute会相对 body 定位 -
width: 0初始值不能省略，否则动画第一次 hover 不触发 - 如果文字有内边距或行高干扰，
bottom值可能需要微调（比如-1px或-3px） - 想加点弹性效果？把
ease换成cubic-bezier(0.2, 0.8, 0.4, 1)
移动端点击反馈和兼容性要注意什么
iOS Safari 对 :hover 支持有限——点击链接后才触发一次 hover，松手就消失；Android Chrome 基本正常，但部分低端机型动画掉帧明显。
- 不要依赖纯
:hover做关键交互提示，建议搭配:focus和:active - 伪元素方案在 IE11 中完全可用，但
currentColor在 IE9–10 下不生效，需 fallback 颜色 - 如果文字是动态加载的（比如 React 渲染后插入），确保样式规则已就绪，否则首次 hover 可能无动画
伪元素方案看着代码多两行，但控制精度和浏览器兼容性远超其他取巧方式。别省那几行 CSS，该写的定位、尺寸、过渡属性一个都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
