html - 获取 :after to add underline only under text and not the entire container

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>