html - 伪元素:after is adding before instead

Question

我将伪元素 :after 应用于章节标题类，但由于某种原因它出现在行的顶部而不是行的下方(我正在尝试创建下划线)。

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 和 :before 必须包含 content 属性。

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

确保 .chapter-heading 类有 position: relative。

您应该为 .chapter-heading:after 添加 top: 100% 或 bottom: 0 以制作下划线。