本文介绍仅通过 CSS 修改 .underline 类，即可让渐变色下划线悬停效果完美适配单行与多行文本，无需改动 HTML 结构，兼顾响应式场景下的兼容性与布局稳定性。
本文介绍仅通过 css 修改 `.underline` 类，即可让渐变色下划线悬停效果完美适配单行与多行文本，无需改动 html 结构，兼顾响应式场景下的兼容性与布局稳定性。
在实际开发中，使用 background 模拟下划线（如双色渐变 + background-size 过渡）是一种现代、灵活的方案。但默认情况下，若将 .underline 应用于块级元素（如 <p></p>），其背景会铺满整个容器宽度和高度，导致悬停时下划线覆盖整段文字区域，而非紧贴每行文本底部——尤其在换行后，下划线会“漂浮”在最后一行下方，失去语义准确性。
核心问题根源：<p></p> 是块级元素，background 的定位基准是其内容盒（content box），而 background-position: 0 100% 中的 100% 指的是块容器的高度底部，而非每行文本的基线（baseline）。
✅ 纯 CSS 解决方案（不改 HTML）：
只需为 .underline 添加 display: inline，即可让背景自动收缩至文本内容宽度，并随换行自然分段渲染：
.underline {
display: inline; /* 关键：转为内联，使 background 紧贴文本行 */
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;
}
⚠️ 注意事项：
-
display: inline会使元素脱离文档流中的块级上下文，可能影响父容器内其他兄弟元素的垂直对齐或间距（例如<p></p>默认的margin-bottom将失效）。 - 若页面已有依赖
<p></p>块级行为的样式（如垂直居中、宽度约束、浮动清除等），需同步微调父容器或相邻元素的布局策略（如用line-height控制行高、vertical-align调整对齐）。
? 进阶推荐（平衡兼容性与语义）：
若项目允许极小幅度的 HTML 调整（仍无需预判是否多行），建议将 .underline 移至内联语义更合理的 <span></span> 上：
<p><span class="underline">This text</span></p> <p><span class="underline">This another, multiline text</span></p>
此时 .underline 可保持 display: inline（默认即如此），既规避了块级元素的背景定位缺陷，又保留了 <p></p> 的结构语义与默认样式继承，是最稳健的实践方式。
? 总结：
单靠修改 .underline 类添加 display: inline 即可解决多行文本下划线错位问题；若布局受干扰，优先考虑包裹 <span></span> ——它不改变响应式断行逻辑，且完全兼容移动端视口变化，是兼顾可维护性与视觉精度的优选方案。
