CSSの擬似要素クラスにパディングトップを追加する方法:: after

Question

パディングトップを:: afterに追加して中央にしたいと思っています。しかし、それは起こっていない。 これは私が得るものです：

このCSSを使用した後

：

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

、これが私のHTMLコードです：

<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

あなた:afterがdisplay: inlineにデフォルトで設定されていますパディングは効果がありません。それをinline-blockまたはblockに変更してください。 （コメントで要求されるように）、それを中央に

、以下のようにdiv要素にフレックスを使用します。

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

使用display:blockまたはdisplay:inline-blockpaddingまたはmarginを適用します。センターを取得するにはmargin:0 autoを追加してください。

.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

あなたはコンテンツの後にセミコロンを追加する必要があります。私はあなたがこのように実行する必要があり、URL（画像/ heartborder.png）属性

OR

と思います：

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