css - 如何在CSS伪元素class::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>