Question

我已经生成了一个伪元素，但它没有在网页中显示！但如果我检查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

＆＃13;

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

＆＃13;

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

＆＃13;

您overflow:hidden;将其更改为visible

:: psuedo-element未显示但生成后？

2 个答案: