[SOLVED] Getting :after to add underline only under text and not the entire container

Getting :after to add underline only under text and not the entire container

I am wanting titles underlined with the :after method. I am getting it to work partially. What I cannot figure out is how to get the underline ("after) to only be under the span text inside of the .slantTitleWrap.

Does anyone see what I am doing wrong?

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

Solution

You can achieve this by using 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>