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

以下是各种 W3C 规范和草案的一些参考：

选择器级别 3 http://www.w3.org/TR/css3-selectors/#gen-content

The :before and :after伪元素可用于在元素内容之前或之后插入生成的内容。

The :before and :after伪元素 http://www.w3.org/TR/CSS2/generate.html

作者指定生成内容的样式和位置:before and :after伪元素。正如他们的名字所示，:before and :after伪元素指定元素的文档树内容之前和之后的内容位置。The content属性与这些伪元素一起指定插入的内容。

内容属性 http://www.w3.org/TR/CSS2/generate.html#propdef-content

最初的：none

该属性与:before and :after伪元素在文档中生成内容。值有以下含义：

none - 不生成伪元素。

样式应用于::before and ::after伪元素影响生成内容的显示。这content属性is此生成的内容，如果不存在，则默认值为content: none是假设的，这意味着该样式没有任何可应用的内容。

如果你不想重复content:'';多次，您可以简单地通过全局样式化所有来覆盖它::before and ::afterCSS 中的伪元素（JSFiddle 示例 http://jsfiddle.net/VzZUz/):

::before, ::after {
    content:'';
}