如何为网页标题的下划线添加linear-gradient渐变效果？

嘿，我之前也遇到过一模一样的问题！直接用text-decoration: underline加渐变确实行不通，因为text-decoration-color只支持纯色，没法用linear-gradient。你用span加border-bottom的思路方向是对的，只是默认的边框位置确实会离文本有点远，咱们调整一下就能搞定～

给你两个靠谱的解决方案：

方案1：用背景渐变模拟下划线（最简单） #

这种方法直接把渐变作为span的背景，通过定位让它刚好出现在文本下方，完美模拟下划线效果：

<h1>正在搭建网站，已为<span class="gradient-underline">标题的部分内容</span>添加下划线</h1>

.gradient-underline {
  /* 设置渐变背景 */
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
  /* 把背景定位到文本底部 */
  background-position: bottom left;
  /* 控制下划线的高度和宽度：100%宽度，2px高度 */
  background-size: 100% 2px;
  /* 只显示一次背景，避免重复 */
  background-repeat: no-repeat;
  /* 可选：加一点底部内边距，让下划线和文本距离更自然 */
  padding-bottom: 2px;
}

方案2：用伪元素精确控制下划线（更灵活） #

如果需要更精细的调整（比如下划线比文本短一点、偏移位置等），用伪元素::after会更方便：

.gradient-underline {
  /* 给span设置相对定位，让伪元素能基于它定位 */
  position: relative;
}

.gradient-underline::after {
  content: "";
  /* 绝对定位，让下划线贴在文本底部 */
  position: absolute;
  bottom: 2px; /* 调整这个值控制下划线和文本的距离 */
  left: 0;
  width: 100%;
  height: 2px;
  /* 渐变效果 */
  background: linear-gradient(to right, #ff6b6b, #4ecdc4);
}

这两种方法都能解决你遇到的问题，方案1代码更简洁，方案2适合需要自定义样式的场景～

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