瞭解：之後和：之前

Question

http://jsfiddle.net/BtGRt/

爲什麼內容出現在div內？不是左/右（之前/之後）div？

Answer 1

因爲:after和:before不會在它們附着的元素之後或之前添加psuedoelements;他們在該元素的內容之後或之前添加它們。

查看here的技術細節 - 生成的元素是匹配元素的最後一個/第一個子項。

Answer 2

看着the spec，你可以看到它們是相對於內容而不是元素插入的。

正如其名稱所表明的：before和：after僞元素 指定的內容位置之前和元素的文檔 樹內容後。

的：前和：後僞元素從在文檔樹中的元素 繼承任何可繼承 屬性其中它們 附着到。

例如，以下規則在每個Q元素之前在 之前插入一個開引號。引號的顏色將爲紅色，但字體 將與其餘Q元素的字體相同：

q：before {content：open-quote;顏色：紅色}

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"; 
}