::after psuedo-element is not displaying but is generated?

Question

i've generated a psuedo element but it's not displaying in web page! but if i check devtools it's generated! i have content empty but even if i fill the content its still isn't showing up?

.info li::after{
position: absolute;
content: "";
background: #000;
top: -110px;
left: 0;
right: 0;
z-index: 10000;
width: 100px;
height: 100px;
}

.info li{
color: white;
font-weight: bolder;
margin: 1rem auto;
width: 100%;
height: 2.4rem;
padding: .1rem;
overflow: hidden;
position: relative;
}

Answer 1

.info li:after{
position: absolute;
content: "after";
background: #000;
top: -110px;
left: 0;
right: 0;
z-index: 10000;
width: 100px;
height: 100px;
}

.info li{
color: white;
font-weight: bolder;
margin: 1rem auto;
width: 100%;
height: 2.4rem;
padding: .1rem;
overflow: visible;
position: relative;
}
ul{
  margin-top:120px;
}

<ul class="info">
  <li>
  </li>
</ul>

you have overflow:hidden; change it to visible

Answer 2

It works perfectly but you have overflow hidden in the <li> element and it causes that pseudo element is hidden by overflown.

Remove the overflow: hidden in your li element and you will see it.