text-decoration 不支持过渡，应改用 border-bottom 或 background-image 实现下划线动画：border-bottom 需同时过渡 color 和 width；background-image 用 background-size 从 0→100% 实现中间展开；注意移动端 :active 状态和动画时长控制。
链接下划线从无到有会闪跳？用 text-decoration 直接过渡无效
CSS 的 text-decoration 本身不支持过渡动画，直接写 transition: text-decoration 0.3s 完全没反应。浏览器不把下划线当可动画属性，它只有开/关两种状态。
真正能过渡的是 border-bottom 或 background-image 这类支持长度、颜色、位置渐变的属性。
- 推荐用
border-bottom模拟下划线：默认设为transparent，悬停时改颜色+宽度 - 确保父元素或链接本身没有意外的
line-height或padding挤压下划线位置 - 如果链接文字带
vertical-align或用了flex布局，border-bottom可能贴不上基线，此时改用background-image: linear-gradient()更稳
用 border-bottom 实现平滑出现的下划线
核心是让“下划线”有明确的起始尺寸（0 高度或透明色），再通过 transition 控制它的变化过程。
a {
text-decoration: none;
color: #333;
border-bottom: 2px solid transparent;
transition: border-bottom-color 0.25s ease, border-bottom-width 0.25s ease;
}
a:hover {
border-bottom-color: #007bff;
border-bottom-width: 2px;
}
- 必须同时过渡
border-bottom-color和border-bottom-width，否则宽度突变会抖 - 别只写
transition: border-bottom 0.25s—— 这会触发整个边框重绘，可能在 Safari 下卡顿 - 如果想让下划线从中间向两边展开，得换
background-image+background-size动画
需要下划线「从中间生长」？用 background-image + background-size
这是目前兼容性好、控制精细的方案，适合强调设计感的场景。
立即学习“前端免费学习笔记（深入）”；
a {
text-decoration: none;
color: #333;
background-image: linear-gradient(to right, #007bff, #007bff);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 0 2px;
transition: background-size 0.3s ease;
}
a:hover {
background-size: 100% 2px;
}
-
background-size: 0 2px是关键——宽度为 0，高度为 2px，悬停时拉到100% 2px - 注意
background-position: bottom center要写全，否则在某些字体下会偏移 - 如果链接内有
span或其他行内元素，background可能被截断，此时需加display: inline-block并设padding-bottom预留空间
移动端点击后残留下划线？别忘了 :active 和 outline
iOS Safari 和部分安卓浏览器在点击链接后会保留伪类状态或添加默认 outline，导致下划线“粘住”不消失。
- 加
a:active { outline: none; }消除点击高亮（但要确保有其他视觉反馈，比如颜色微调） - 如果用了
border-bottom方案，检查是否被outline掩盖或叠加，建议统一用box-shadow替代 outline 做焦点提示 - 真机调试时发现动画卡顿？可能是开启了
will-change: transform却没配transform: translateZ(0)触发硬件加速，但小动画没必要，慎加
最常被忽略的是：动画时间太短（400ms）又像卡住。0.2–0.3 秒是多数场景的甜点区间。
