CSS :before/:after selectors are suddenly being positioned separately of parent div

Question

I switched to a new computer, and all of a sudden the CSS :after and :before selectors no longer work.

What's truly bizarre is that the :before/:after selectors I added before, on my other computer, display completely normally on my new computer. But any new ones I add now simply don't show up, even if I copy-and-paste the old code onto a new div.

For example, this one:

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;
}

This code works when copied and pasted directly into a fiddle: ( http://jsfiddle.net/rLnrtu0x/ ) but only the red box displays on my local browser. No matter what I do, the blue box won't show. All other CSS behaves normally.

Does anyone know what I might be doing wrong?

Tested on Mozilla 35.0.1 and Chrome 42.0.2311.152 (64-bit) on Ubuntu 14.04. I can't retest it on my old computer because it broke, but I never had problems with :before/:after selectors before.

UPDATE

I just found the selectors with my inspector. They actually display normally, but they are being positioned relative to html, not their parent div. Here again, with the code that I added before the computer change, the :before/:after selectors are positioned relative to the parent div. But the new code, even though it's copy-and-pasted, positions the selectors relative to the html. Why would this be?

Answer 1

The parent container needs to have position

Absolutely positioned elements are positioned "at a specified position relative to its closest positioned ancestor or to the containing block." (src: MDN)

So, your :after pseudo-element is not contained by its parent because the parent isn't "positioned" or its position is set to static.

The only explanation is that there must have been something in your previous setup that was applying position to #wtf, which allowed its child to be positioned absolutely within it.

You can "fix" the issue by applying position to #wtf like so:

#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>