text-decoration 不支持 transition 动画，需用 background-image 或 border-bottom 模拟；推荐 background + background-size 方案，通过 background-size: 0 1px 到 100% 1px 实现左到右下划线展开，注意 background-repeat: no-repeat 和 background-position: bottom left。
为什么直接用 text-decoration 做不了下划线展开动画
因为 text-decoration 的线条是浏览器渲染层硬生成的，不支持 transition，哪怕你写 transition: text-decoration 0.3s 也完全没反应。想做“鼠标移入时下划线从左到右滑出”，得绕开它，用 background-image 或 border-bottom 模拟——而 background-size 是最可控、最易对齐文字长度的方式。
用 background + background-size 实现精准下划线展开
核心思路：把下划线做成一个 1px 高的线性渐变背景，初始宽度设为 0 100%（即宽 0、高 100%），再通过 background-size 控制它的横向铺展范围。关键在于让背景尺寸只在水平方向变化，同时锚点对齐文字底部。
实操要点：
- 必须设置
background-repeat: no-repeat，否则会平铺成多条线 -
background-position要明确写成bottom left / 0 100%这类双斜杠语法，前半段是位置，后半段是尺寸（CSS background shorthand 中的 position/size 顺序） - 过渡目标值推荐用
100% 1px，不是100% 100%——后者会让高度也拉伸，破坏线条粗细 - 为防文字换行导致下划线错位，建议加
display: inline-block或限制容器white-space: nowrap
span.underline {
display: inline-block;
background: linear-gradient(to right, #000, #000) no-repeat;
background-position: bottom left;
background-size: 0 1px;
transition: background-size 0.3s ease;
}
span.underline:hover {
background-size: 100% 1px;
}
兼容性与常见翻车点
这个写法在 Chrome/Firefox/Safari（含 iOS）都稳，但 IE11 不支持 background 的双参数 shorthand（position/size），得拆成独立属性；另外，如果父元素有 transform 或 filter，可能触发新层叠上下文，导致 background-position: bottom 计算基准偏移——这时换成 calc(100% - 1px) 更可靠。
容易踩的坑：
- 忘了设
background-repeat: no-repeat，hover 后整行密密麻麻全是短线 - 用
background: #000代替渐变，结果过渡时颜色会“闪一下”（浏览器对纯色 background-size 过渡支持不稳定） - 文字用了
letter-spacing或font-feature-settings，但下划线没跟着延展——需确保background-size: 100% 1px中的 100% 是按内容盒宽度算的，不要被内边距干扰
要不要加 will-change: background-size
一般不用。现代浏览器对 background-size 过渡优化得不错，加了反而可能引发不必要的图层提升和内存开销。只有当页面里同类动效密集（比如导航栏几十个带下划线的菜单项同时 hover），且出现掉帧时，才考虑局部加 will-change: background-size，并且 hover 结束后记得用 JS 清除。
真正该盯住的是文字盒的边界是否干净——padding、line-height、vertical-align 这些细微值，都会让下划线看起来“飘”或“压字”。动手前先 inspect 元素，看 computed 的 background-position 和 background-size 数值是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
