Html 将渐变边框底部添加到<；人力资源>；数据内容文本

到目前为止，我在数据内容中有一个关于我的文本

我想在文本“About Me”下面添加一个带三种颜色的线性渐变边框底部，就像下划线一样。我试着在分割器中设置背景。分割器：之后是线性渐变和填充等等，但它最终将整个背景设置为线性渐变

HTML:

如果有人知道如何做这件事，或者有更好的方法来做这件事，请让我知道，谢谢

。分段分隔器{
字体系列：Lato-Regular；
线高：1米；
位置：相对位置；
大纲：0；
边界：0；
颜色：黑色；
文本对齐：左对齐；
高度：1.5em；
字体大小：20px；
}
.分段分隔器：在{
内容：''；
背景：黑色；
位置：绝对位置；
左：0；
最高：50%；
宽度：100%；
高度：1px；
}
.分段分隔器：之后{
内容：attr（数据内容）；
位置：相对位置；
显示：内联块；
颜色：黑色；
填充：0.5em；
线高：1.5em；
颜色：黑色；
背景色：白色；
}

您可以使用此代码

。分段分隔器{
字体系列：Lato-Regular；
线高：1米；
位置：相对位置；
大纲：0；
边界：0；
颜色：黑色；
文本对齐：左对齐；
高度：1.5em；
字体大小：20px；
}
.分段分隔器：在{
内容：''；
位置：绝对位置；
左：0；
最高：50%；
宽度：100%；
高度：1px；
保证金：0；
边界：0；
背景：#333；/*铬，Safari4+*/
背景：-webkit渐变（线性、左上、右上、颜色停止（0%、#34495e）、颜色停止（10%、#34495e）、颜色停止（10%、#207cca）、颜色停止（24%、#2989d8）、颜色停止（24%、#34495e）、颜色停止（42%、#34495e）、颜色停止（42%、#207cca）、颜色停止（70%、#207cca）、颜色停止（70%、#颜色停止）（355e）、颜色停止（100%）；/*铬合金，Safari4+*/
背景：-webkit线性梯度（左，#34495e 0%，#34495e 10%，#207cca 10%，#2989d8 24%，#34495e 24%，#34495e 42%，#207cca 42%，#207cca 70%，#207cca 70%，#34495e 70%，#34495e 100%/#铬10+，Safari 5.1+*/
背景图像：-莫兹线性梯度（左，#34495e 0%，#34495e 9%，#207cca 10%，#2989d8 24%，#34495e 24%，#34495e 42%，#207cca 42%，#207cca 70%，#207cca 70%，#34495e 71%，#34495e 100%）；
背景图像：-o-线性梯度（左，#34495e 0%，#34495e 9%，#207cca 10%，#2989d8 24%，#34495e 24%，#34495e 42%，#207cca 42%，#207cca 70%，#207cca 70%，#34495e 71%，#34495e 100%）；
背景图像：线性梯度（左，#34495e 0%，#34495e 9%，#207cca 10%，#2989d8 24%，#34495e 24%，#34495e 42%，#207cca 42%，#207cca 70%，#207cca 70%，#34495e 71%，#34495e 100%）//Chrome10+，Safari 5.1+*/
}
.分段分隔器：之后{
内容：attr（数据内容）；
位置：相对位置；
显示：内联块；
颜色：黑色；
填充：0.5em；
线高：1.5em；
颜色：黑色；
背景色：白色；
}

---

那么您想要文本上的线性渐变？你尝试过线性渐变吗？如果这个答案对你有帮助，请点击我答案上的复选图标（正确答案）。我想在“关于我”文本下面的下划线上添加一个线性渐变，可能使用边框底部。我尝试过线性渐变，但它们使“关于我”的整个背景成为线性渐变。谢谢你的回答！然而，这使得

---

线成为线性渐变，然而我想让“关于我”文本有一个线性渐变下划线，就像线性渐变边框底部一样。

<hr class="section-divider" data-content="ABOUT ME"></hr>

.section-divider {
  font-family: Lato-Regular;
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: black;
  text-align: left;
  height: 1.5em;
  font-size: 20px;
}
.section-divider:before {
  content: '';
  background: black;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}
.section-divider:after {
  content: attr(data-content);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 .5em;
  line-height: 1.5em;
  color: black;
  background-color: white;
}