如何用CSS实现文本下方的不同颜色下划线效果？

嘿，我懂你这种“曾经实现过现在突然搞不定”的懊恼！咱们来一步步解决这个问题：你现在的CSS只实现了单色下划线，要达成不同颜色的下划线效果，我们可以通过伪元素或者渐变背景来实现，下面分两种常见场景给你方案：

场景1：双层不同颜色的下划线（带层次感） #

如果你的需求是文本下方有两层不同颜色的下划线，用:before和:after两个伪元素就能轻松实现：

.exp {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 15px; /* 控制文本和下划线区域的间距 */
  position: relative;
  margin-bottom: 30px;
  font-style: italic;
}

/* 底层深绿色下划线 */
.exp:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #219b65;
}

/* 上层浅绿下划线（比底层短一点+位置稍上） */
.exp:after {
  content: "";
  position: absolute;
  width: 85%; /* 可以调整长度，营造层次感 */
  height: 2px;
  bottom: 3px;
  left: 0;
  background-color: #66d9a8;
}

你的HTML不用改：

<h1 class="exp">Experience</h1>

场景2：分段双色的下划线（左半绿右半蓝这类） #

如果想要下划线分成两段不同颜色，用线性渐变作为背景是最方便的：

.exp {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  position: relative;
  margin-bottom: 30px;
  font-style: italic;
}

.exp:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  /* 这里可以调整百分比来控制颜色分界的位置 */
  background: linear-gradient(to right, #219b65 50%, #1a73e8 50%);
}

为啥你现在的代码没达到预期？ #

你当前的CSS只用到了:before伪元素添加了单色的border-bottom，完全没涉及“不同颜色”的逻辑～另外给你两个小Tips：

• 用background-color比border-bottom更灵活，不管是多色还是渐变都更好实现
• 调整bottom属性可以精准控制下划线和文本的距离，调整width能让下划线比文本短，营造更精致的效果

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