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

Question

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

Answer 1

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

选择器级别3

伪元素’：before’和’：after’可用于在元素内容之前或之后插入生成的内容。

：before和：after伪元素

作者使用：before和：after伪元素指定生成内容的样式和位置。顾名思义，：before和：after伪元素指定元素的文档树内容之前和之后的内容位置。
“ content”属性与这些伪元素一起指定了要插入的内容。

内容属性

初始： 无

该属性与：before和：after伪元素一起使用以在文档中生成内容。值具有以下含义：

无 - 不产生伪元件。

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

如果您不想重复content:'';多次，则可以简单地通过全局样式化CSS中所有:: before和::
after伪元素的方式来覆盖此内容：

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