伪元素：之后加入之前，而不是

我应用伪元素：在章节标题类之后，但出于某种原因，它出现在行的顶部而不是它下面（我试图创建一个强调）。伪元素：之后加入之前，而不是

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

来源

2016-12-23 Chris

'：after'不是伪元素。改用':: after'。 –

: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。

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

来源

2016-12-23 08:23:51 WorkWe

你能否解释为什么.chapter-heading必须是position：relative和：after position：absolute？另外，我删除了内容：“”;它仍然有效。 – Chris

请通过https://webdevdoor.com/html-css/css-position-child-div-parent了解更多关于职位的信息。 – WorkWe

.chapter-heading { 
    position: relative; 
} 

.chapter-heading:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 30%; 
    height: 1px; 
    background-color: #ddd; 
    left: 35%; 
    bottom: 0; 
}

检查此jsfiddle

来源

2016-12-23 08:26:06

伪元素：之后加入之前，而不是

回答

相关问题