使用 CSS linear-gradient 背景替代伪元素，可让锚点链接在多行换行时仍保持连续、完整的底部高亮样式，避免传统 ::before 绝对定位导致的断层问题。
使用 css `linear-gradient` 背景替代伪元素，可让锚点链接在多行换行时仍保持连续、完整的底部高亮样式，避免传统 `::before` 绝对定位导致的断层问题。
在实际 Web 开发中，我们常需为 标签添加视觉强调效果（如底部横线、色块背景等）。但当链接文本较长、容器宽度受限时，锚点会自然换行——此时若使用 position: absolute + ::before 的经典方案，伪元素因脱离文档流且仅基于整个 的边界定位，往往只覆盖首行或末行底部，无法随每一行文字“贴底延伸”，造成样式断裂。
✅ 正确解法：利用 CSS background 的渐变能力，以内联背景（inline background）方式实现每行独立渲染。
✅ 推荐方案：linear-gradient 背景 + background-attachment: local
a {
text-decoration: none;
word-break: break-word; /* 更推荐于 break-word，兼容性与语义更优 */
padding-bottom: 3px; /* 预留底部空间，避免文字紧贴高亮 */
background: linear-gradient(to right, orange, orange)
left bottom / 100% 6px no-repeat;
/* 等价写法（更清晰）：
background-image: linear-gradient(orange, orange);
background-position: left bottom;
background-size: 100% 6px;
background-repeat: no-repeat;
*/
}
? 原理说明：background 默认按「行框（line box）」逐行绘制。当设置 background-position: left bottom 且 background-size 指定为固定高度（如 6px）时，浏览器会在每一行文字的左端起始、底部对齐处绘制一段 6px 高的橙色条，天然支持多行连续渲染，无需 JavaScript 或复杂布局干预。
⚠️ 注意事项
- ❌ 避免使用 word-wrap: break-word（已过时），改用 word-break: break-word 或更语义化的 overflow-wrap: break-word；
- ✅ 若需悬停动态效果（如颜色/高度变化），可配合 transition: background-size .3s, background-color .3s；
- ? 兼容性极佳：linear-gradient 背景 + 行内定位在所有现代浏览器（Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+）中均原生支持；
- ? 不要加 background-clip: text 或 color: transparent —— 这会破坏可访问性（屏幕阅读器可能忽略无色文字）。
✅ 完整可运行示例
<style>
a {
display: inline-block; /* 可选：增强可控性，非必需 */
text-decoration: none;
color: #333;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.5;
padding-bottom: 4px;
background: linear-gradient(orange, orange)
left bottom / 100% 5px no-repeat;
transition: background-size 0.25s ease;
}
a:hover {
background-size: 100% 7px; /* 悬停时加粗 */
}
</style><p>
<a href="#">How can I apply the styling so it wraps on both lines?</a>
</p>
<p>
<a href="#">How can I apply the styling so it wraps on both lines? How can I apply the styling so it wraps on both lines? How can I apply the styling so it wraps on both lines?</a>
</p>
该方案简洁、健壮、无障碍友好，是解决「换行锚点全行样式覆盖」问题的专业级实践。无需修改 HTML 结构，不依赖 JS，一次定义，多行生效。
