了解以前的内容规则:

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/