使用CSS装饰文字类型

Question

是否有可能仅使用CSS装饰单词以获得此结果？我需要用不同的颜色在其下划线，然后将类型添加为文本（在CSS中）。

理想情况下，不应触摸HTML内容，但我可以对其做一些细微改动：

<p>
  <span class="xart">The</span>
  <span class="xadj">big</span>
  <span class="xn">house</span>.
</p>

我应该在CSS样式中添加什么？

.xart { text-decoration: underline; text-decoration-color: blue; }
.xadj { text-decoration: underline; text-decoration-color: green }
.xn { text-decoration: underline; text-decoration-color: bred; }

Answer 1

我将通过以下方式添加您要查找的样式。

.xart {
	padding-bottom: 3px;
	display: inline-block;
}
.xart:after {
	content: 'art';
	display: block;
	border-top: 2px solid blue;
}

.xadj {
	padding-bottom: 3px;
	display: inline-block;
}
.xadj:after {
	content: 'adj';
	display: block;
	border-top: 2px solid green;
}

.xn {
	padding-bottom: 3px;
	display: inline-block;
}
.xn:after {
	content: 'n';
	display: block;
	border-top: 2px solid red;
}

<p>
  <span class="xart">The</span>
  <span class="xadj">big</span>
  <span class="xn">house</span>.
</p>

Answer 2

修改CSS - Multiple text-decorations with style and color

title

<div class="col-xs-1">
    <div class="card-header">
        <h4 class="card-title">set</h4>
    </div>

    <div class="text-center"> 
        <button type="button" class="btn btn-primary center-block add-option" id="add-option">test</button>
    </div> 
</div>