CSS实现可换行彩色下划线：text-decoration-color兼容性不足的替代方案

嘿，你用伪元素模拟下划线的思路方向是对的，但目前的代码只适合单行文本——当文本换行时，伪元素会变成横跨整个容器的长横线，没法跟着每一行文本走对吧？而且text-decoration-color确实在一些旧浏览器（比如IE系列）里支持不佳，我给你两个更靠谱的方案，完美适配多行换行的场景：

方案一：用背景渐变模拟（推荐，兼容性拉满） #

这个方法利用CSS背景渐变生成下划线，完全随文本换行，兼容几乎所有现代浏览器和旧版IE（IE10+）：

.underline {
  /* 渐变：上方透明，下方10%高度为黄色，可调整百分比改变下划线粗细 */
  background-image: linear-gradient(transparent 90%, #ffc04d 10%);
  background-repeat: repeat-x;
  background-size: 100% 100%;
  /* 可选：调整下划线与文本的间距 */
  padding-bottom: 2px;
}

对应的HTML无需大幅修改：

<h1><span class="underline">Sprouted Bread that wraps to multiple lines perfectly with colored underline</span></h1>

方案优势 #

• 完全跟随文本换行，每一行都有独立的下划线
• 兼容性远优于text-decoration-color，覆盖绝大多数浏览器
• 可通过调整渐变百分比、padding值，灵活控制下划线的粗细和间距

方案二：优化你的伪元素方案（仅适合单行文本） #

如果你的场景只有单行文本，那可以微调原代码让下划线更精准：

.underline {
  position: relative;
  /* 给文本加底部内边距，避免下划线贴得太近 */
  padding-bottom: 3px;
}
.underline:after {
  position: absolute;
  content: '';
  height: 1px;
  background-color: #ffc04d;
  bottom: 0;
  /* 用width:100%替代left/right:0，逻辑更直观 */
  width: 100%;
  z-index: -1;
}

注意：这个方案在多行文本场景下会失效，伪元素只会生成一条横跨父容器的横线，仅适合单行标题类场景。

内容的提问来源于stack exchange，提问作者t3ol5