Pseudo-element :after 改为添加 before

Question

我将 pseudo-element :after 应用于 chapter-heading class，但由于某种原因它出现在行的顶部而不是行的下方（我正在尝试创建下划线）。

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 class 有 position: relative。

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

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

Pseudo-element :after 改为添加 before

Pseudo-element :after is adding before instead

html

css

pseudo-element

twitter-bootstrap-3