Pseudo-element :after is adding before instead

Question

I applied the pseudo-element :after to the chapter-heading class, but for some reason it appears on top of the row instead of underneath it (I'm trying to create an underline).

HTML:

                <div class="row chapter-heading">
                    <button class="btn btn-lesson-toc" type="button" data-toggle="modal" data-target="#tocModal">
                    <i class="material-icons icon-align">list</i>
                    </button>
                    <div class="col-xs-12 text-center">
                        <h5>${card.title}</h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-9 text-left">
                        <div class="lesson-card" type="button" data-toggle="modal" data-target="#cardDetailModal">
                            <h6>${card.heading}</h6>
                            <p>${card.shortInfo}</p>
                            <img src="${card.cartoonUrl}"/>
                        </div>
                    </div>
                </div>

CSS:

.chapter-heading:after {
  display: block;
  position: absolute;
  width: 30%;
  height: 1px;
  background-color: $scoops-grey-400;
  // border: 1px solid $scoops-grey-400;
  left: 35%;
}

Answer 1

:after and :before have to include content property.

.chapter-heading:after {
  content: "";
  display: block;
  position: absolute;
  width: 30%;
  height: 1px;
  background-color: $scoops-grey-400;
  left: 35%;
}

Make sure .chapter-heading class have position: relative.

You should add top: 100% or bottom: 0 for .chapter-heading:after to make a underline.

Answer 2

.chapter-heading {
  position: relative;
}

.chapter-heading:after {
  content: "";
  display: block;
  position: absolute;
  width: 30%;
  height: 1px;
  background-color: #ddd;
  left: 35%;
  bottom: 0;
}

check this jsfiddle