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

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>