伪元素的CSS影响父元素

Question

我已经设置了test case，其中CSS伪元素（:: after）在鼠标悬停时显示在给定（parent-）元素上。到目前为止一切正常，但伪元素的负上边距影响父元素而不是生成元素。 （虽然负左边距按预期工作。）

任何人都可以解释这种行为和/或知道解决方法吗？

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/

父元素移动的原因是collapsing margins。

“修复”的一种方法是将overflow: hidden添加到.land：
http://jsfiddle.net/MLThM/9/

修复程序适用于原始演示：
http://jsfiddle.net/MLThM/10/

_{* =暂时忘记::after和::before中可能存在的错误，它们与当前问题无关。}