使用CSS装饰文字类型

时间:2018-12-04 18:15:45

标签: html css

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

enter image description here

理想情况下,不应触摸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; }

2 个答案:

答案 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>