如何用CSS实现带部分下划线的渐变文本效果

你已经用<span>把需要下划线的单词单独包裹了，这正好可以用来实现需求，不用改HTML结构，直接加CSS就行：

基础单色下划线 #

直接给span设置inline-block和底部边框，这样每个单词的下划线独立，单词间的空格自然形成间隔：

.hero-text span {
  display: inline-block;
  /* 自定义下划线的颜色和厚度 */
  border-bottom: 3px solid #2c3e50;
  /* 调整下划线和文字的距离 */
  padding-bottom: 2px;
}

渐变下划线（如果需要） #

要是想要渐变效果的下划线，用背景图实现：

.hero-text span {
  display: inline-block;
  /* 自定义渐变颜色 */
  background-image: linear-gradient(to right, #3498db, #e74c3c);
  background-repeat: no-repeat;
  background-position: bottom left;
  /* 控制下划线的厚度，第二个值是厚度 */
  background-size: 100% 3px;
  padding-bottom: 2px;
}

原理说明 #

• display: inline-block让每个span成为独立的内联块元素，下划线（不管是边框还是背景）只会覆盖当前单词的宽度，不会和相邻单词的下划线连在一起。
• 单词之间的空格会保留，自然形成下划线的间隔，完全符合你的需求。

你的HTML结构不用改，保持原样就行：

<h1 class="hero-text">
    Some text<br>
    some more text<br>
    <span>Underline</span> <span>Here</span>.
</h1>

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