是否有可能仅使用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; }
答案 0 :(得分:2)
我将通过以下方式添加您要查找的样式。
.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>
答案 1 :(得分:1)
修改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>