理解：之后和：之前

Question

http://jsfiddle.net/BtGRt/

为什么内容出现在div中？不在左/右（前/后）div？

Answer 1

查看the spec，您可以看到它们是针对内容而不是元素插入的。

  

正如他们的名字所示，：before和：after伪元素   指定元素文档前后的内容位置   树内容。

     

：before和：after伪元素继承任何可继承的元素   元素的属性   在它们所在的文档树中   附接。

     

例如，以下规则之前插入一个开放的引号   每个Q元素。引号的颜色为红色，但字体为红色   将与Q元素的其余部分的字体相同：

     

q：在{content：open-quote;之前颜色：红色}

Answer 2

因为:after和:before不会在附加元素之前或之前添加伪元素;他们在该元素的内容之后或之前添加它们。

有关技术细节，请参阅here - 生成的元素是匹配元素的最后/第一个子。

Answer 3

将“content”与：after和：before结合使用时，会在现有内容之前或之后添加内容。所以，在div内。如果你想要解析整个div周围的附加内容，你需要像

这样的东西

<div id="w">
 <div id="f">World </div>
</div>


#w:before{    
background: yellowgreen;
content: "Hello ";
}
#f{
width: 200px;
height: 200px;
background: gold;
margin: 100px;
padding: 100px;
}
#w:after{    
background: burlywood;
content: "StackOverflow";
}