本文介绍在不修改 HTML 结构的前提下，通过纯 CSS 实现响应式渐变下划线效果，使其在单行和多行文本中均能精准贴合文字底部，避免背景覆盖整块容器。核心方案是调整元素显示模式并合理利用 background-position 与 background-size。
本文介绍在不修改 html 结构的前提下，通过纯 css 实现响应式渐变下划线效果，使其在单行和多行文本中均能精准贴合文字底部，避免背景覆盖整块容器。核心方案是调整元素显示模式并合理利用 `background-position` 与 `background-size`。
要让 .underline 类在 <p></p> 等块级元素上实现「仅在文本下方渲染渐变下划线」的效果（尤其在换行时仍保持每行末尾精准对齐），关键在于将背景绘制范围从整个块框收缩至内联内容区域。
默认情况下，<p></p> 是块级元素，其 background 会铺满整个容器高度与宽度，导致渐变条横跨全部行高，而非紧贴每行文字底部。解决方案有两类，均无需预知文本是否换行：
✅ 推荐方案：display: inline（零 HTML 修改）
为 .underline 添加 display: inline，使其脱离块级流，仅包裹实际文本内容。此时 background 将自然跟随内联盒的布局行为——在多行文本中，浏览器会为每一行内联盒单独绘制背景（即“行框级背景”），从而实现每行末端精准显示渐变下划线。
.underline {
display: inline; /* 关键：转为内联元素 */
cursor: pointer;
position: relative;
text-decoration: none;
background: linear-gradient(
to right,
green 0%,
green 75%,
red 75%,
red 100%
) no-repeat 0 100%; /* 100% 表示底边对齐 */
background-size: 0 2px;
transition: background-size 400ms ease;
}
.underline:hover {
background-size: 100% 2px; /* 宽度拉满，高度固定为 2px */
}⚠️ 注意事项：
display: inline可能影响原有文档流布局（如相邻内联元素间距、垂直对齐等）。若父容器使用text-align或存在其他内联兄弟元素，需额外检查视觉一致性；必要时可配合vertical-align: bottom或font-size: 0父容器微调。
?️ 备选方案：语义化包裹（轻微 HTML 调整，更可控）
若布局敏感，推荐将 .underline 移至 <span></span> 上——<span></span> 本就是内联元素，天然适配多行文本的行级背景渲染，且不影响 <p></p> 的块级语义与默认样式：
<div class="container"> <p><span class="underline">This text</span></p> <p><span class="underline">This another, multiline text</span></p> </div>
此时 CSS 无需改动 display，保留原始块级结构语义，同时获得精确的行级下划线行为。
? 原理补充
CSS 规范规定：当 background-attachment: scroll（默认）且元素为内联级时，背景定位点（如 0 100%）相对于每行内联盒的基线（baseline） 计算，因此多行文本会逐行渲染背景条；而块级元素的背景始终相对于整个盒模型边界定位。
综上，display: inline 是满足“零 HTML 修改”需求的最优解，兼顾兼容性（支持所有现代浏览器）与简洁性。只需一行声明，即可让渐变下划线智能适配任意屏幕尺寸下的自动换行场景。
