我将伪元素: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
进行下划线。