how to add padding top in CSS pseudo element class::after

Question

I want to add padding top to ::after and want to make it centered.

But it's not happening, this is what I get :

After using this css :

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

and this is my HTML CODE :

<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

Your :after is set by default to display: inline so padding has no effect on it. Change it to inline-block or block and then it will.

To center it (as requested in comments), use flex on the div as below:

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

you need to add semicolon after content: url(images/heartborder.png) attribute

OR

I think you need to do like this:

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

Answer 3

Use display:block or display:inline-block to apply padding or margin. add margin:0 auto to get center.

.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>