为什么：before和：after伪元素需要'content'属性？

Question

为什么：before和：after伪元素需要'content'属性？

鉴于以下场景，为什么：after选择器需要内容属性才能运行？

.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调试器中看到样式; 但是，它们不会显示在页面上。