Can a div with position = relative have pseudo element::after with position = absolute?

Question

I have a div that is empty and contains a background image. If I make its position relative, is it possible to make its pseudo element ::after absolute?

Answer 1

Yes... and no... probably for your specific case ^^

The pseudo elements :before and :after are builded at run time as child elements of the targeted element, so (even with div empty content, but for explaining purpose):

<div id="mydiv">content</div>

#div {
position:relative;
width:50px;
height:50px;
background:red;
}
#div:after {
content:'+'; /* content attribute is mandatory */
position:absolute;
width:100%;
height:100%:
background:green;
}

... will be built as:

<div id="mydiv">content<div>+</div></div>

So, size of :after pseudo element is relative to 'mydiv' parent/source element, and positionnement is done relatively to it also ('absolute' positionement mode is done relatively to the first positonned parent, window/viewport only if none positioned parent: so if your purpose is to position the 'after' pseudo element relative to window -- as an absolute positionnement usual simple behaviour, you cannot... but it's technically possible, even if the behaviour isn't the one expected ;))