如何在CSS僞元素類中添加填充頂部::之後

Question

我想將padding top添加到::之後並且希望使其成爲中心。但沒有發生。 這就是我得到：

使用該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 { 
 
    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-block申請padding或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

需要後內容添加分號：網址（圖像/ heartborder.png）屬性

OR

我認爲你需要做的是這樣的：

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