I recently noticed on a project that the ::after pseudoelement did not add any content after an input element:
input::after { content: "xxxxxxxxxx"; } // no "virtual last child" inserted into DOM "after" the input
(reference to "virtual last child" is from MDN page here)
Of course, an element such as a div will have content "after" it, and the last child "::after" will be inserted into the DOM:
div:empty::after { content: "xxxxxxxxxx"; }
//In DOM
<div>::after</div>
but nothing is inserted in these cases:
head, script { content: "qaqaqa"; }
My initial assumption was that any HTML elements that are rendered by the browser with tags that should be closed (.e.g, p, body, html, div,....etc) will have ::after inserted as a last child (and ::before inserted as a first-child), whereas elements that do NOT fit this (e.g., script, head, img, br, input,...etc) will not exhibit this behavior. My CodePen attempts suggested this was correct.
I read through documentation which finally led me to this resource, in which a note reads:
Note. This specification does not fully define the interaction
of :before and :after with replaced elements (such as IMG in HTML).
This will be defined in more detail in a future specification.
(for definition of "replaced elements" see here)
So now my refined assumption regarding ::after and ::before is that these pseudoelements are only applicable to "renderable" elements which cannot be classified as "replaced elements" (Note this refined assumption now excludes textarea from use with ::after / ::before, whereas my initial assumption would have included it - textarea::after was tested with CodePen and no ::after last child is inserted into the DOM).
Would the refined assumption be correct?
