了解以前的内容规则：

Question

如果内容为空，之前没有显示任何内容，即使我设置了高度和宽度，但是当我在内容中输入一些文本时，它会显示该文本？

CSS：

.a {
    background-color: cyan;
    height: 300px;
    width: 200px;
    margin-left: 50px;
}

.a:before {    
    /* This is the one that I change */
    content: "test";
    margin-left: -10px;
    background-color: red;
    height: 10px;
    width: 10px;
}

HTML：

<div class="a"></div>

Answer 1

因为:before伪元素默认显示为内联。改变这一点，你就会看到你的广场：

.a:before {
    display:block;
}

http://jsfiddle.net/oGeez/Va67f/

Answer 2

您必须将display属性设置为block才能显示元素

jsFiddle here

Answer 3

https://developer.mozilla.org/en-US/docs/Web/CSS/content

查看内容属性的值和结果。

“none：不生成伪元素”

否则psudo元素显示是内联的。在你的情况下我会用。内容：“”和显示块。

对不起。在手机上格式化。