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>
通过包裹您在跨度中的元素。您可以将文本修饰放在父元素上,将文本颜色放在跨度上。
HTML:
<h1><span class="underline">Some Text</span></h1>
CSS:
h1 {
text-decoration: underline;
color: red;
}
.underline {
color: blue;
}
如何在线性渐变中轻松控制单个元素中的颜色,大小和距离:
.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>
使用display: inline
,添加一个底部边框并用填充空格。
你也可以使用line-height
然后放置负边距来增加线之间的空间。
而且......你也可以动画它!
.underline {
position: relative;
padding-bottom: 1px;
border-bottom: 1px solid #ffc04d;
}
<h1 style="width: 5em">
<span class="underline">Sprouted Bread</span>
</h1>
正如@chriskirknielsen所提到的,你可以使用box-decoration-break,尽管IE or Edge不支持。 致谢:@Temani Afif