Question

我将伪元素：after应用于chapter-heading类，但由于某种原因它出现在行的顶部而不是在它下面（我正在尝试创建一个下划线）。

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。

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

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;
}

检查此jsfiddle

伪元素：之后添加之后

2 个答案: