伪元素的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/