多行文本的悬停下划线效果，常见于文章摘要中的链接、卡片标题或导航说明。当文字长度不固定，在窄屏容器中自动换行时，我们希望用户悬停后每一行都出现一条清晰、平滑的下划线，而不是生硬地一次性全部显示。text-decoration: underline 虽然能快速实现基础效果，但在跨行场景中很难控制线条展开动画。因此，实际项目中更常见的做法是用 CSS 背景渐变来模拟下划线。下面会从传统方案的限制讲起，再给出可复用的渐变实现。
text-decoration 方案能解决什么，不能解决什么
对于单行链接，最直接的做法是移除默认下划线，然后在悬停时重新加上。比如：
.link {
text-decoration: none;
color: #2b6cb0;
}
.link:hover {
text-decoration: underline;
}
这段代码在多行文本上也能工作，浏览器会为每一行文字分别绘制下划线。但它的问题在于：下划线粗细、颜色与文字颜色绑定，无法单独调整；下划线与文字基线的距离由字体度量决定，不同字体的表现不一致；而且 transition 对 text-decoration 并不产生平滑的宽度过渡，悬停时下划线会瞬间出现。
现代浏览器提供了 text-decoration-thickness 和 text-underline-offset 属性，可以调整下划线的粗细和偏移量。例如：
.link:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
text-decoration-color: #e53e3e;
text-decoration-skip-ink: none;
}
其中 text-decoration-skip-ink: none 可以让下划线不再自动跳过英文字母的降部，比如 g、y 的下伸部分，从而形成连续线条。但即便如此，这种方案仍然无法做到从无到有的宽度过渡动画。如果想在悬停时让下划线从左向右展开，或者以更柔和的方式出现，就需要换一种思路。
用 background-image 线性渐变模拟下划线
核心思路是把下划线当成元素背景的一部分：使用一个单色线性渐变作为背景图，定位在元素底部，初始宽度为 0，悬停时宽度变为 100%。由于 background-size 是可以通过 transition 平滑过渡的属性，因此能实现理想的动画效果。基础样式如下：
.link {
color: #2b6cb0;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 2px;
padding-bottom: 2px;
transition: background-size .3s ease;
}
.link:hover,
.link:focus-visible {
background-size: 100% 2px;
}
这里 linear-gradient(currentColor, currentColor) 创建了一个实色渐变，颜色跟随文字颜色；background-position: 0 100% 把背景定位在元素底部；background-size: 0 2px 让背景初始宽度为 0、高度为 2px；padding-bottom: 2px 给下划线留出空间，避免线条紧贴文字。悬停时 background-size 变为 100% 2px，过渡就会让线条从左向右展开。
对于单行文本，这段代码已经足够。但多行文本还需要一个关键属性：box-decoration-break: clone。默认情况下，行内元素的背景在跨行时会被当作一个整体来处理，可能出现背景只绘制在首尾或中间区域不完整的情况。加上 clone 后，每一行都会拥有独立的背景渲染区域，下划线才能稳定出现在每一行底部。完整写法如下：
.link {
color: #2b6cb0;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 2px;
padding-bottom: 2px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-size .3s ease;
}
.link:hover,
.link:focus-visible {
background-size: 100% 2px;
}
在浏览器中，这段代码会让一个跨行链接的每一行都拥有自己的下划线背景。由于 background-size 动画作用在每一行上，悬停时所有行的线条会同时展开，视觉上非常统一。需要注意的是，展开方向始终是从左向右，因为 background-position 固定在 0 的位置。如果希望从中间向两侧展开，单行文本可以使用伪元素加 transform，但多行文本下伪元素无法自动拆分，因此从左展开是最稳妥的方案。
伪元素方案为什么不适合自动换行
另一种常见思路是使用 ::after 伪元素来制作下划线。单行场景下，可以给伪元素设置绝对定位、宽度从 0 过渡到 100%，并控制动画方向。例如：
.link {
position: relative;
text-decoration: none;
}
.link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: currentColor;
transition: width .3s ease;
}
.link:hover::after {
width: 100%;
}
这种方案在单行文本中表现很好，还能配合 transform-origin 改变展开方向。但问题在于，伪元素只能生成一个盒子，它不会随文本换行自动拆分成多个片段。当文本跨行时，伪元素只会出现在元素整体盒子的底部，无法覆盖到第二行、第三行的文字下方。如果强行给每一行包裹单独的 <span>，再为每个 span 设置伪元素，就需要手动或通过脚本拆分文本，这会破坏文本的自然换行，也增加维护成本。因此，面对自动换行的多行文本，背景渐变加 box-decoration-break 是更合适的选择。
动画参数与可访问性细节
过渡动画的时长和缓动函数会直接影响手感。一般来说，0.2 到 0.3 秒比较合适，过短会显得突兀，过长则让交互显得迟滞。可以使用 ease-out 或更精细的 cubic-bezier(0.4, 0, 0.2, 1) 让动画在开始阶段较快、结束阶段放缓。例如：
.link {
transition: background-size .25s cubic-bezier(0.4, 0, 0.2, 1);
}
还要考虑键盘用户和偏好减弱动画的用户。键盘焦点通过 :focus-visible 触发相同的下划线效果，可以保证交互一致性。对于系统中开启了“减少动态效果”的用户，可以在媒体查询中关闭过渡：
@media (prefers-reduced-motion: reduce) {
.link {
transition: none;
}
}
这样既保留了悬停和聚焦时的下划线视觉提示，又避免给敏感用户带来不必要的动画刺激。
总结
实现多行文本的悬停下划线效果，关键在于理解背景在行内元素跨行时的渲染机制。text-decoration 虽然简单，但在动画控制和样式细节上不够灵活；伪元素方案无法自动适配换行；而 background-image 线性渐变配合 background-size 过渡和 box-decoration-break，能够以较低成本获得稳定、平滑的多行下划线。再结合 focus-visible 和 prefers-reduced-motion，就可以在视觉体验和可访问性之间取得平衡。