如何在CSS伪元素class::after中添加填充顶部

Question

我想将填充顶部添加到 ::after 并希望使其居中。

但这并没有发生，这就是我得到的：

使用这个CSS后：

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

这是我的 HTML 代码：

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

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>