本文介绍一种无需修改 HTML 结构即可为单行和多行文本统一添加平滑渐变下划线 hover 效果的 CSS 解决方案，核心是通过 display: inline 重置元素渲染行为，并兼顾布局稳定性与响应式兼容性。
本文介绍一种无需修改 html 结构即可为单行和多行文本统一添加平滑渐变下划线 hover 效果的 css 解决方案，核心是通过 `display: inline` 重置元素渲染行为，并兼顾布局稳定性与响应式兼容性。
在构建现代网页交互时，渐变色下划线（如绿→红过渡）是一种简洁有力的悬停提示方式。但原生基于 background 的实现常在多行文本中失效——因为 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 等块级元素的背景会覆盖整块区域，导致下划线“拉满”到容器宽度，而非紧贴每行文字末端。
根本原因在于：background 默认作用于整个盒模型（content + padding），而多行文本的 line-height 和换行逻辑使背景无法自动“跟随”每一行末尾。
✅ 纯 CSS 修复方案（不改 HTML）
只需为 .underline 类添加 display: inline：
.underline {
display: inline; /* 关键：让背景仅包裹文本内容本身 */
cursor: pointer;
position: relative;
text-decoration: none;
background: linear-gradient(
to right,
green 0%,
green 75%,
red 75%,
red
) no-repeat 0 100%;
background-size: 0 2px;
transition: background-size 400ms ease;
}
.underline:hover {
background-size: 100% 2px;
}
该写法强制将 <p class="underline"></p> 渲染为内联元素，使其背景尺寸严格匹配实际文本宽度（含换行后各段落的自然宽度），从而实现每行独立、精准的下划线动画。
⚠️ 注意事项与权衡
-
display: inline会丢失块级元素默认的垂直间距（如margin-top/bottom），若影响现有布局，建议配合vertical-align: baseline或微调父容器line-height； - 若项目对语义化或无障碍要求较高（如
<p></p>内嵌<span></span>更符合结构逻辑），推荐轻量 HTML 调整：将.underline移至<span></span>上（保持<p></p>容器不变），既保留块级流式布局，又确保背景精确包裹文本：
<p><span class="underline">This another, multiline text</span></p>
此时无需修改 CSS，原有规则可直接复用，且完全兼容响应式断行场景——无论屏幕宽窄导致几行显示，下划线始终紧贴每行文字底部。
? 进阶提示：如需增强跨浏览器一致性，可补充 -webkit-background-clip: text 配合 color: transparent 实现文字渐变填充；但本例聚焦下划线，故以 background-position: 0 100% + background-size 组合为最优解。
总结：display: inline 是解决多行文本下划线错位最轻量、侵入性最小的纯 CSS 方案；若布局约束较强，用 <span></span> 封装文本是语义更优、可控性更强的折中选择。两者均无需 JS，完全响应式，开箱即用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
