我目前正在通过跟随FreecodeCamp.org的Youtube教程来练习CSS
我的代码如下:
null
p::before{
content: "hello ";
color: white;
font-size: 60px;
background: salmon;
margin-bottom: 20px;
}
p::after{
display: block;
content: "";
height: 100px;
width: 100px;
background: green;
}<p>Before and after pseudo elements</p>null
现在，当我在p::after pseudo-selector中指定display:block时，我将得到如下所示的预期输出
但是当我省略display:block属性时，绿色框就会消失，如下所示:
有人对为什么会发生这种情况有适当的解释吗？ 我所期待的是，这个盒子仍然会在“hello before and after pseudo-ements”之后显示，但是它已经完全消失了。。。
提前感谢你的帮助。
亲切的问候，索海布
然后使用display:inline-block
具有display:inline的元素不能在其上设置显式维度-这将没有任何效果。 所以，因为伪元素没有非空的内容，它将以0维度出现，因此是不可见的。
将display:inline-block；添加到CSS
null
p::before{
content: "hello ";
color: white;
font-size: 60px;
background: salmon;
margin-bottom: 20px;
}
p::after{
display: inline-block;
content: "";
height: 100px;
width: 100px;
background: green;
}<p>Before and after pseudo elements</p>