:: psuedo-element沒有顯示但生成後？

Question

我已經生成了一個psuedo元素，但它不顯示在網頁中！ 但如果我檢查devtools它的產生！ 我有內容爲空，但即使我填的是它的內容仍沒有顯示出來？

.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

它完美，但你已經溢出隱藏在<li>元素，它會導致該僞元素被溢出的隱藏。

在li元素中取出overflow: hidden，你會看到它。

Answer 2

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

你overflow:hidden;將其更改爲visible