What is it in a pseudo-element that makes the pseudo-element pseudo?

Question

In my other question What does "pseudo" mean in CSS? I got this answer:

"A pseudo-element is something that acts like an element, but is not an element".

What is it that makes pseudo-element not an element?

Answer 1

A pseudo element is not in the dom. That is what makes it not an element. It is an element created by CSS.

Pseudo elements cannot be seen or manipulated by various technologies. For example, many JavaScript methods don't work for pseudo elements. That is why it is "not an element."

To explain further:

Elements are items in the dom. For example, div, p, and span are all html elements. They apear in the dom, and can be manipulated to behave and look certain ways using CSS and JavaScript.

Pseudo elements are not in the dom. p:before and .header:after are examples of pseudo elements. These are not items that will apear in the dom. Instead, they are elements that are created to add something to the look of a site. for example.

.quote:before, .quote:after {
    content: '"';
}

Will add quotation marks at the beginning and at the end of a any element marked with the class of quote. This will make it look like a quote. You can style those quotation marks to make them look more like a block quote or whatever you want to do.

These will not actually create an element in the dom, but they will create something that behaves like an element that you can style.

Here is further reading about pseudo elements: http://www.w3schools.com/css/css_pseudo_elements.asp

Here is a good list of things you can do with pseudo elements that may help you visualize it better. https://css-tricks.com/pseudo-element-roundup/

I hope that makes more sense to you.