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