Pseudo-Element: nach dem Hinzufügen zuvor

Question

Ich habe das Pseudo-Element: nach der Kapitel-Überschrift-Klasse, aber aus irgendeinem Grund erscheint es oben auf der Zeile statt darunter (ich versuche, ein zu erstellen unterstreichen).

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 und :before haben content Eigenschaft aufzunehmen.

.chapter-heading:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 30%; 
    height: 1px; 
    background-color: $scoops-grey-400; 
    left: 35%; 
} 

Stellen Sie sicher, .chapter-heading Klasse position: relative haben.

Sie sollten top: 100% oder bottom: 0 für .chapter-heading:after hinzufügen, um eine Unterstreichung zu machen.

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

Kontrolle dieses jsfiddle