伪元素的 CSS 影响父元素答案

【问题标题】：CSS of pseudo-element affects parent element伪元素的 CSS 影响父元素
【发布时间】：2011-07-18 14:40:34
【问题描述】：

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

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

【问题讨论】：

【解决方案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 中可能存在的错误，它们与当前问题无关。}

【讨论】：

【解决方案2】：

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

【讨论】：