css - 疑似要素のCSSは親要素に影響します

Question

テストケースを設定しました。ここでは、CSS疑似要素（:: after）が、指定された（親）要素の上にマウスを置いたときに表示されます。これまでのところすべて正常に機能していますが、疑似要素の負のトップマージンは、生成された要素ではなく親に影響します。（負の左マージンは期待どおりに機能しますが。）

誰かがこの動作を説明したり、回避策を知ったりできますか？

Answer 1

コンテナのdivをに設定してからposition:relative、新しいコンテンツをに設定することができますabsolute。このようにして、含まれているdivのマージンに影響を与えることはありません。

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

Answer 2

最初に知っておくべきことは、を使用する::afterと、DOMは次のようになるということです。

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

したがって、これはまったく同じように動作します*：（ChromeまたはFirefoxを使用）
http://jsfiddle.net/MLThM/7/

そして、いくつかの無関係なプロパティが削除されました：http:
//jsfiddle.net/MLThM/8/

親要素が移動する理由は、マージンの折りたたみです。

overflow: hidden追加する「修正」する1つの方法：http .land：
//jsfiddle.net/MLThM/9/

そして、元のデモに適用された修正：http:
//jsfiddle.net/MLThM/10/

_{* =考えられるバグについては忘れましょう。今のところ、それらは現在の質問とは関係ありません::after。::before}