获取 :after，仅在文本下添加下划线，而不是整个容器

Question

我想要用:after方法加下划线的标题。我正在让它部分工作。我无法弄清楚的是，如何使下划线("after(仅在.slantTitleWrap内的跨度文本下。

有人看到我做错了什么吗？

.slantBlock2Title {
color: #4D4D4D;
font-size: 1.5rem;
font-family: 'Muli', sans-serif;
line-height: 1.5em;
}
.slantTitleWrap span:after {
content: '';
display: block;
width: 40%;
margin-top: 5px;
background: #b82222;
height: 2px;
}

<div class="slantTitleWrap">
<span class="slantBlock2Title">Uderline me</span>
</div>

Answer 1

您可以使用display: inline-block来实现此目的。

.slantBlock2Title {
color: #4D4D4D;
font-size: 1.5rem;
font-family: 'Muli', sans-serif;
line-height: 1.5em;
display: inline-block;
}
.slantTitleWrap span:after {
content: '';
display: block;
width: 100%;
margin-top: 5px;
background: #b82222;
height: 2px;
}

<div class="slantTitleWrap">
<span class="slantBlock2Title">Uderline me</span>
</div>

Answer 2

我只添加了positions以使其按预期工作：

.slantBlock2Title {
position: relative;  /* Added */
color: #4D4D4D;
font-size: 1.5rem;
font-family: 'Muli', sans-serif;
line-height: 1.5em;
}
.slantTitleWrap span:after {
position: absolute;  /* Added */
content: '';
display: block;
width: 100%; /* Modified */
margin-top: 5px;
background: #b82222;
height: 2px;
}
p{
font-family: 'Muli', sans-serif;
}

<div class="slantTitleWrap">
<span class="slantBlock2Title">U<u>n</u>derline me</span>
</div>
<br>
<p>(I added the “n”, too! :D)</p>

希望对您有所帮助！