我将伪元素: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%;
}

最佳答案

: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

您应该为top: 100%添加bottom: 0.chapter-heading:after进行下划线。

09-12 06:32
查看更多