[英]Pseudo-element :after is adding before instead
I applied the pseudo-element :after to the chapter-heading class, but for some reason it appears on top of the row instead of underneath it (I'm trying to create an underline). 我将伪元素:after应用于了章标题类,但是由于某种原因,它出现在行的顶部而不是在行的下面(我试图创建一个下划线)。
HTML: 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: 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
and :before
have to include content
property. :after
和:before
必须包含content
属性。
.chapter-heading:after {
content: "";
display: block;
position: absolute;
width: 30%;
height: 1px;
background-color: $scoops-grey-400;
left: 35%;
}
Make sure .chapter-heading
class have position: relative
. 确保.chapter-heading
类具有position: relative
。
You should add top: 100%
or bottom: 0
for .chapter-heading:after
to make a underline. 您应该为.chapter-heading:after
添加top: 100%
或bottom: 0
来.chapter-heading:after
下划线。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.