理解度：後および：前

Question

http://jsfiddle.net/BtGRt/

divにコンテンツが表示されるのはなぜですか？ divの前/後にはありませんか？

Answer 1

:afterと:beforeは、添付されている要素の前または後に擬似要素を追加しないため、要素のの内容の前または後に追加します。内容はです。

技術的な詳細については、hereを参照してください。生成された要素は、マッチした要素の最後/最初の子です。

Answer 2

the specを見ると、要素ではなく内容に関して挿入されていることがわかります。その名前が示すように

、：beforeと：前と要素のドキュメント ツリーコンテンツ後の擬似要素は、コンテンツの場所を指定 後。

：擬似要素は、それらが を結合している文書ツリー内の要素 から任意の継承 プロパティを継承後：前と。

たとえば、次の規則は、Q要素ごとに の前に空白記号を挿入します。引用符の色は赤ですが、フォント はQ要素の残りのフォントと同じになります。

q：before {content：open-quote;色：赤}

Answer 3

あなたが「コンテンツ」を組み合わせる：後と：前に、それは既存のコンテンツの前または後にコンテンツを追加します。だから、部門内。 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"; 
}