在以下情况下，为什么：after选择器需要content属性才能起作用？

.test {

    width: 20px;

    height: 20px;

    background: blue;

    position:relative;

}



.test:after {

    width: 20px;

    height: 20px;

    background: red;

    display: block;

    position: absolute;

    top: 0px;

    left: 20px;

}


<div class="test"></div>

请注意，直到您指定content属性，您才看不到伪元素：

.test {

    width: 20px;

    height: 20px;

    background: blue;

    position:relative;

}



.test:after {

    width: 20px;

    height: 20px;

    background: red;

    display: block;

    position: absolute;

    top: 0px;

    left: 20px;

    content:"hi";

}


<div class="test"></div>

为什么这是预期的功能？您可能会认为显示块将迫使该元素显示出来。奇怪的是，您实际上可以在Web调试器中看到样式。但是，它们不会显示在页面上。