如何使用CSS为文本设置多种颜色的下划线（非单一颜色）

完全可以实现，不需要额外嵌套多余HTML标签，最方便的方案是用CSS原生的多层文本装饰属性实现，下划线会自动跟随文本换行，不需要手动适配尺寸。

核心实现思路是给目标元素叠加两层underline文本装饰，分别给两层设置不同的粗细、颜色、与文本的偏移距离，让两条线错开位置不重叠即可：

• 靠近文本的一层设置为1px粗、红色，偏移量小
• 远离文本的一层设置为3px粗、橙色，偏移量更大，在红色下划线下方

完整可运行代码示例：

<!-- 普通文本标签，不需要额外嵌套结构 -->
<p class="multi-color-underline">这是带双层双色下划线的示例文本</p>

.multi-color-underline {
  /* 声明两层下划线装饰 */
  text-decoration-line: underline, underline;
  /* 分别配置两层的粗细：红细橙粗 */
  text-decoration-thickness: 1px, 3px;
  /* 分别配置两层的颜色 */
  text-decoration-color: #dc2626, #f97316;
  /* 分别配置两层和文本的距离，错开位置避免重叠 */
  text-underline-offset: 2px, 6px;
  /* 可选配置：下划线自动避开g、p这类字母的下延笔画，视觉更整洁 */
  text-decoration-skip-ink: auto;
}

这个方案适配所有现代浏览器（Chrome 87+、Firefox 70+、Safari 12.1+），覆盖95%以上的用户使用场景。如果需要兼容更老旧的浏览器，可以用渐变背景做兜底方案，同样不需要额外标签：

.multi-color-underline-fallback {
  /* 留出下划线的显示空间 */
  padding-bottom: 5px;
  /* 两层渐变分别对应两条下划线 */
  background-image: linear-gradient(#dc2626, #dc2626), linear-gradient(#f97316, #f97316);
  background-repeat: no-repeat;
  /* 分别设置两条线的粗细 */
  background-size: 100% 1px, 100% 3px;
  /* 分别设置两条线的位置 */
  background-position: 0 calc(100% - 3px), 0 100%;
  /* 适配多行文本，让每一行底部都显示下划线 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

效果参考：

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