html - 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>

作为旁注，border-bottom 与 inline element 一起使用效果很好，但当然您不能轻易控制距离以使其表现为文本装饰:

.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>