CSS中易碎的彩色下划线

Question

我希望有一个彩色下划线，当它打破时看起来像这样：

text-decoration-color似乎得不到足够广泛的支持。

我试过了：

.underline {
  position: relative;
 }

.underline:after {
  position: absolute;
  content: '';
  height: 1px;
  background-color: #ffc04d;
  bottom: .1rem;
  right: 0;
  left: 0;
  z-index: -1;
}

 <h1><span class="underline">Sprouted Bread</span></h1>

Answer 1

线性渐变如何在单个元素中轻松控制颜色，大小和距离：

.underline {
  position: relative;
  font-size:28px;
  background:
    linear-gradient(yellow,yellow) /* Color */
    left 0 bottom 2px/ /* Position */
    100% 2px  /* Size (width height)*/
    no-repeat;
 }

<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>

作为旁注，边框底部与内联元素一起使用很好，但当然你无法轻松控制距离，使其表现为文本装饰：

.underline {
  position: relative;
  font-size:28px;
  border-bottom:2px solid yellow;
 }

<div style="width:150px;text-align:center"><span class="underline">Sprouted Bread</span></div>

Answer 2

Try this JSFiddle

通过包裹您在跨度中的元素。您可以将文本修饰放在父元素上，将文本颜色放在范围上。

<强> HTML：

<h1><span class="underline">Some Text</span></h1>

<强> CSS：

h1 {
  text-decoration: underline;
  color: red;
}

.underline {
  color: blue;
}

Answer 3

只需添加边框！

使用display: inline，添加底部边框并使用填充空格。

你也可以使用line-height然后放置负边距来增加线之间的空间。

而且......你也可以给它制作动画！

＆＃13;

＆＃13;

.underline {
  position: relative;
  padding-bottom: 1px;
  border-bottom: 1px solid #ffc04d;
}

＆＃13;

<h1 style="width: 5em">
  <span class="underline">Sprouted Bread</span>
</h1>

＆＃13;

＆＃13;

＆＃13;

^{如@chriskirknielsen所述，您可以使用box-decoration-break，但IE or Edge不支持。致谢：@Temani Afif}