僞元素的CSS影響父元素

Question

我已經設置了一個test case，其中一個CSS僞元素（:: after）顯示在鼠標懸停在給定（父元素）元素上。到目前爲止，一切正常，但僞元素的負頂邊會影響父元素，而不是生成的元素。 （雖然負左邊距按預期工作。）

任何人都可以解釋此行爲和/或知道解決方法嗎？

Answer 1

需要注意的是，當你使用::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/

父元素移動的原因是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/