Получение: после, чтобы добавить подчеркивание только под текстом, а не весь контейнер

Question

Я хочу, чтобы заголовки подчеркивались методом :after. Я получаю это работать частично. Я не могу понять, как сделать так, чтобы подчеркивание ("after) находилось только под текстом span внутри .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

Я только добавил position s, чтобы он работал так, как вы хотели:

.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>

Надеюсь, это поможет!