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

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>