在css3中利用:hover和过渡属性制作平滑下划线动画，核心做法是隐藏默认下划线并设置一个与文字颜色相同的背景渐变，通过改变背景位置实现从左到右的延伸效果。具体操作是在普通状态下将 background-size 设为 0% 100%，在 :hover 状态将其改为 100% 100%，同时配合 transition 属性指定 background-position 的变化时长和缓动函数。这样做可以避免使用伪元素带来的层级问题，且兼容性良好。
background-position 变化时如何控制动画方向？
通过调整 background-position 的起始值和结束值，可以精确控制下划线的延伸方向。例如，从左侧开始延伸需将初始位置设为 0% 100%，结束位置设为 100% 100%；若要从右侧向左延伸，则初始位置设为 100% 100%，结束位置设为 0% 100%。这种基于背景位置的动画方式比传统的 width 变化更流畅，因为它不触发重排（reflow）。
/* CSS代码示例 */
.link {
text-decoration: none;
color: #333;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: 0% 100%;
transition: background-position 0.3s ease-out;
}
.link:hover {
background-size: 100% 100%;
background-position: 100% 100%;
}
上述代码定义了一个类为 .link 的元素。初始状态下，背景图片宽度为0%，不可见。当鼠标悬停时，背景宽度扩展至100%，位置从0%移动到100%，产生从左到右的动画效果。过渡时间为0.3秒，使用 ease-out 缓动函数使动画先快后慢，符合视觉习惯。
如何处理多行文本下的下划线动画边界？
对于多行文本，直接使用 background-position 可能导致下划线在不同行间出现断裂或不连续。解决方法是将 background-clip 设置为 text，并结合 -webkit-background-clip 确保浏览器兼容性。这样下划线会严格跟随文字轮廓，避免超出文本边界。此外，可添加 padding-bottom 微调下划线与文字的间距，提升可读性。
/* 多行文本优化代码 */
.multi-line-link {
display: inline-block;
text-decoration: none;
color: #333;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: 0% 100%;
background-clip: text;
-webkit-background-clip: text;
transition: background-position 0.3s ease-out;
padding-bottom: 2px;
}
.multi-line-link:hover {
background-size: 100% 100%;
background-position: 100% 100%;
}
该代码针对多行文本进行了优化。通过 display: inline-block 确保背景应用范围正确，background-clip: text 使下划线仅显示在文字区域内。测试发现，当文本换行时，下划线仍能保持连续，且不会溢出容器。此方案适用于大多数现代浏览器，包括Chrome、Firefox和Safari。
基于 linear-gradient 颜色变化的具体视觉效果是什么？
使用 linear-gradient(currentColor, currentColor) 作为背景图片时，下划线颜色会完全继承当前文字颜色，无需额外指定颜色值。这意味着当文字颜色因主题或状态改变时，下划线会自动同步更新，保持一致性。若需自定义颜色，可将 currentColor 替换为具体色值，如 #ff0000，此时下划线将固定为该颜色，不再随文字变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
