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

i switched new computer, , of sudden css :after , :before selectors no longer work.

what's bizarre :before/:after selectors added before, on other computer, display on new computer. new ones add don't show up, if copy-and-paste old code onto new div.

for example, 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 , pasted directly fiddle: ( http://jsfiddle.net/rlnrtu0x/ ) red box displays on local browser. no matter do, blue box won't show. other css behaves normally.

does know might doing wrong?

tested on mozilla 35.0.1 , chrome 42.0.2311.152 (64-bit) on ubuntu 14.04. can't retest on old computer because broke, never had problems :before/:after selectors before.

update

i found selectors inspector. display normally, being positioned relative html, not parent div. here again, code added before computer change, :before/:after selectors positioned relative parent div. new code, though it's copy-and-pasted, positions selectors relative html. why be?

the parent container needs have position

absolutely positioned elements positioned "at specified position relative closest positioned ancestor or containing block." (src: mdn)

so, :after pseudo-element not contained parent because parent isn't "positioned" or position set static.

the explanation there must have been in previous setup applying position #wtf, allowed child positioned absolutely within it.

you can "fix" issue applying position #wtf 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>