擬似要素のCSSは親要素に影響を与えます

Question

私はtest caseを設定しました。与えられた（親要素）上のマウスホバーにCSS擬似要素（:: after）が表示されます。これまでのところすべてうまく動作しますが、擬似要素の負のトップマージンは、生成された要素の代わりに親に影響します。 （負の左マージンは期待通りに機能しますが）

誰もこの動作を説明することができますか？

Answer 1

注意すべき最初の事はあなたが::afterを使用する場合、DOMはこのようになっていることである：：だから

<div class="land" lang="de">[content of element]<after></after></div> 

、これは正確に*同じように動作します
http://jsfiddle.net/MLThM/7/

そして、いくつかの余分な性質を除去した（クロムまたはFirefoxを使用）：
http://jsfiddle.net/MLThM/8/

親要素が移動する理由は、collapsing marginsです。

一つ追加することで、 "修正" する方法overflow: hidden.landに：
http://jsfiddle.net/MLThM/9/

そして、あなたのオリジナルのデモに適用される修正：
http://jsfiddle.net/MLThM/10/

_{は、* =のは、中のバグの可能性を忘れてみましょう現在のところ::afterと::beforeは、現在の質問とは関係ありません。}

Answer 2

いつでもコンテナdivをposition:relativeに設定し、新しいコンテンツをabsoluteに設定できます。この方法では、包含divの余白には影響しません。

例：http://jsfiddle.net/MLThM/6/