What is the element type of pseudo-elements?

Question

<pseudo> </pseudo> ?

The pseudo-elements of CSS are not in the DOM. But internally they must be equivalent to some kind of generic HTML element, since they can be styled, can be visible, and they affect the page flow.

What is the element type of a pseudo element?

And can we programmatically create them, without using CSS?

Answer 1

Pseudo-elements have no element type as far as the document language is concerned because, as you state, they don't exist in the DOM, and as can be inferred from the "pseudo-" prefix, they're not "real" elements. CSS just calls them pseudo-elements, however you have different pseudo-elements for different purposes or different parts of element structures, such as the self-explanatory ::first-letter and ::first-line, and ::before and ::after for generating content before and after an element's actual content.

That pseudo-elements affect the page flow has nothing to do with the DOM. A browser uses CSS to lay out and format DOM elements into objects that can be rendered to the screen, and in the process of doing so creates pseudo-elements as descendants of boxes that are made for real elements. Although you typically attach a pseudo-element to an element, you're not altering the DOM in any way; instead, you're simply altering how the browser lays out a page.

Because pseudo-elements are a concept unique to CSS (defined in the Selectors module), you cannot create them using anything other than CSS. The implementation of pseudo-elements as a CSS concept is defined in CSSOM instead, which is the CSS equivalent of the DOM (and where methods like window.getComputedStyle() are defined). However I'm not very familiar with the CSSOM, so I can't comment further than that they're implemented very similarly to real elements in terms of CSS.