wie padding top in CSS pseudo element class :: :: nach

Question

hinzufügen Ich möchte padding top zu :: nach hinzufügen und wollen es in der mitte machen. Aber es passiert nicht. Das ist, was ich bekommen:

Nach der Anwendung dieser css:

.list-unstyled li::after { 
content: url(images/heartborder.png) 
text-align:center; 
padding-top: 30px; 
} 

und das ist mein HTML-CODE:

<li> 
    <div class="col span-1-of-3 box"> 
     <span class="icon-small"> 
      <i class="fa fa-eye" aria-hidden="true"></i> 
      <div class="details"> 
       <h5 class="heading">View/Edit Profile</h5> 
       <p>You can view or edit your profile from here. Phone no., address, other information etc. etc.</p> 
      </div> 
     </span> 
    </div> 
</li> 

Answer 1

Ihre :after standardmäßig display: inline gesetzt Das Padding hat also keine Auswirkung darauf. Ändern Sie es in inline-block oder block und dann wird es.

es zum Zentrum (wie in den Kommentaren angefragt), flex zur Verwendung auf dem div wie folgt:

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: green; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
div:after { 
 
    content: ""; 
 
    width: 20px; 
 
    height: 20px; 
 
    background: blue; 
 
    display: inline-block; 
 
    padding-top: 5px; 
 
}

<div></div>

Answer 2

Verwenden display:block oder display:inline-blockpadding oder margin anzuwenden. Fügen Sie margin:0 auto hinzu, um in die Mitte zu gelangen.

.list-unstyled li::after { 
 
    content: url(images/heartborder.png) 0 0 no-repeat; 
 
    text-align: center; 
 
    padding-top: 30px; 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<li> 
 
    <div class="col span-1-of-3 box"> 
 
<span class="icon-small"> 
 
<i class="fa fa-eye" aria-hidden="true"></i> 
 
<div class="details"> 
 
<h5 class="heading">View/Edit Profile</h5> 
 
<p>You can view or edit your profile from here. Phone no., address, other information etc. etc.</p> 
 
</div> 
 
</span> 
 
    </div> 
 
</li>

Answer 3

Sie müssen Semikolon nach Inhalt hinzufügen: url (images/heartborder.png) Attribut

ODER

Ich glaube, Sie so zu tun:

.list-unstyled li::after { 
    content: url(images/heartborder.png); 
    text-align: center; 
    padding-top: 30px; 
}