CSS:/:在选择器突然被分别定位为父级div之后

Question

我切换到新计算机，突然间，CSS :after和:before选择器不再工作。

真正奇怪的是，我之前在另一台计算机上添加的:before/:after选择器完全正常显示在我的新计算机上。但是我现在添加的任何新的都不出现，即使我将旧代码复制到新的div。

例如，这个：

html

<div id="wtf"></div>

CSS

#wtf {
    width: 10px;
    height: 20px;
    background: red;
}
#wtf:after {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: blue;
}

此代码在复制并直接粘贴到小提琴中时起作用：（http://jsfiddle.net/rlnrtu0x/），但只有红色框在我的本地浏览器上显示。无论我做什么，蓝色框都不会显示。所有其他CSS的行为正常。

有人知道我可能做错了什么吗？

在Mozilla 35.0.1和Chrome 42.0.2311.152（64位）上测试了Ubuntu 14.04。我无法在旧计算机上重新测试它，因为它破裂了，但是以前我从来没有遇到过:before/:after选择器的问题。

update

我刚刚与检查员一起找到了选择器。它们实际上是正常显示的，但是它们是相对于html而不是父母div的定位。再次，在计算机更改之前添加的代码后，:before/:after选择器的定位相对于父级。但是，即使新代码是复制的，也将选择器相对于html定位。为什么会这样？

Answer 1

父容器需要具有position

绝对定位的元素被定位为"相对于其最接近的祖先或包含块的指定位置。"（SRC：MDN）

因此，您的:after假元素不包含其父母，因为父母没有"定位"或将其位置设置为static。

唯一的解释是，您以前的设置中一定有一些将position应用于#wtf的设置，这使其孩子可以绝对放置在其中。

您可以通过将位置应用于#wtf之类的"解决"问题：

#wtf {
    width: 10px;
    height: 20px;
    background: red;
    position: relative;
}
#wtf:after {
    content: "";
    position: absolute;
    left: 100px;
    top: 10px;
    width: 20px;
    height: 20px;
    background: blue;
}

<div id="wtf"></div>

Answer 2

事实证明，它与计算机更改无关。:before/:after选择器实际上是显示的，但是它们是相对于HTML而不是父级的定位，因为父级是绝对定位的。