如何在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上使用flex，如下所示：

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

你需要在内容后添加分号：url（images / heartborder.png）属性

OR

我认为你需要这样做：

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