css - 伪元素的 CSS 影响父元素

Question

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

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

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/

父元素移动的原因是折叠边距。

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

并将修复应用于您的原始演示：http:
//jsfiddle.net/MLThM/10/

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

Answer 2

您始终可以将容器 div 设置为position:relative，然后将新内容设置为absolute. 这样您就不会影响包含 div 的任何边距。

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