在网页交互设计中，给段落文本添加悬停下划线是提升用户体验的常见操作，但默认的text-decoration属性只能实现单行下划线，无法适配多行文本的换行场景。要实现多行文本悬停时的下划线跟随文本换行显示，需要借助CSS的其他属性组合实现。
基础实现思路
多行下划线的核心逻辑是让下划线的宽度和位置跟随每一行文本的实际长度变化，而不是固定占满整个容器宽度。常用的实现方式有两种：一种是利用内联元素的特性配合伪元素，另一种是使用背景图像渐变模拟下划线。
方案一：内联元素+伪元素实现
将段落文本设置为内联块元素，再给内联块添加伪元素作为下划线，这样下划线就会跟随内联块的宽度变化，适配多行场景。具体实现步骤如下：
- 将段落的display属性设置为inline，让文本按内联元素排列，换行时每一行都是独立的内联片段
- 给段落添加hover伪类，控制下划线的显示状态
- 使用伪元素生成下划线，设置其位置在文本底部，宽度继承文本宽度
对应的CSS代码如下：
/* 段落基础样式 */
.multi-line-text {
display: inline; /* 设置为内联元素，让多行文本每行独立 */
font-size: 16px;
line-height: 1.8;
color: #333;
position: relative;
cursor: pointer;
}
/* 默认隐藏下划线，悬停时显示 */
.multi-line-text::after {
content: '';
position: absolute;
left: 0;
bottom: -2px; /* 下划线距离文本底部的距离 */
width: 100%; /* 宽度继承父元素（即每行文本）的宽度 */
height: 1px; /* 下划线高度 */
background-color: transparent; /* 默认透明 */
transition: background-color 0.2s ease; /* 添加过渡动画 */
}
/* 悬停时显示下划线 */
.multi-line-text:hover::after {
background-color: #ff6600;
}
HTML结构代码：
<p>
<span class="multi-line-text">这是一段测试多行下划线的段落文本，当文本内容长度超过容器宽度时，会自动换行显示，悬停时每一行文本底部都会出现对应的下划线，而不是只有最后一行有下划线或者整段底部只有一条长下划线。</span>
</p>
方案二：背景渐变模拟下划线
如果不想修改文本的display属性，也可以使用background-image的线性渐变来模拟下划线，通过控制背景的绘制范围实现多行适配。这种方式的优势是可以自定义下划线的样式，比如虚线、波浪线等。
核心是通过background-size设置下划线的高度，background-repeat控制下划线只在文本底部重复，具体代码如下：
.gradient-underline {
font-size: 16px;
line-height: 1.8;
color: #333;
cursor: pointer;
background-image: linear-gradient(to right, #ff6600 0%, #ff6600 100%);
background-repeat: repeat-x; /* 只在水平方向重复 */
background-position: 0 100%; /* 背景位置在底部 */
background-size: 100% 1px; /* 背景宽度100%，高度1px（即下划线高度） */
background-color: transparent;
transition: background-size 0.2s ease;
}
/* 默认隐藏下划线，将背景高度设为0 */
.gradient-underline:not(:hover) {
background-size: 100% 0;
}
HTML结构代码：
<p class="gradient-underline">
这是使用背景渐变实现的多行下划线效果，同样支持文本换行场景，悬停时每一行文本底部都会出现下划线，并且可以很方便地修改下划线的颜色和高度，适配不同的设计需求。
</p>
两种方案的对比
两种方案各有适用场景，具体差异如下：
| 对比维度 | 内联元素+伪元素方案 | 背景渐变方案 |
|---|---|---|
| 兼容性 | 支持所有现代浏览器，IE9及以上 | 支持所有现代浏览器，IE10及以上 |
| 样式灵活性 | 只能实现实线，修改样式需要改伪元素属性 | 可实现实线、虚线、渐变色下划线 |
| 代码复杂度 | 需要修改文本display属性，结构稍复杂 | 仅修改背景属性，代码更简洁 |
注意事项
在实际使用中需要注意以下几点：
- 如果段落容器有固定宽度，需要确保文本换行逻辑正常，避免下划线宽度计算错误
- 使用内联元素方案时，不要给段落设置固定高度，否则可能影响内联元素的换行计算
- 下划线的颜色和高度可以根据设计需求调整，伪元素方案修改background-color和height属性，背景方案修改linear-gradient和background-size属性即可
如果项目中需要兼容更老的浏览器，优先选择内联元素+伪元素的方案，否则背景渐变方案的代码更简洁易维护。
CSS多行下划线hover效果text_decoration修改时间：2026-07-13 19:51:28