What does “pseudo” mean in CSS? [duplicate]

Question

This question already has an answer here:

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

When I read about CSS and HTML I cross the word pseudo-elements.

I haven't found a good short explanation for what pseudo means. Could someone please explain this to me?

Answer 1

Supposed or purporting to be but not really so; false; not genuine:

— https://en.oxforddictionaries.com/definition/pseudo-

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

Answer 2

In a word, "fake".

A more complete definition can be found here: http://www.dictionary.com/browse/pseudo

Answer 3

A pseudo element is a CSS-generated non-DOM element that is rendered as if it was a DOM element in the browser. But it doesn't actually add a node to the DOM. So if you inspected it in, say Chrome Dev Tools, you won't see it as a regular node.

Interestingly some screen-readers read pseudo-element content and others don't.

Answer 4

psuedo-elements allow you to style specific parts of an element. Some examples of pseudo-elements are:

• ::after
• ::before

These specific ones allow you to add style to just after, or just before an element.

for example:

.test {
    background-color: gray;
}

.test::after {
    content: ' some more text';
    color: red
}

<div class='test'>
    testing...
</div>

Here, we style the .test element normally

BUT, then we add a bit more after it using the pseudo-element selector ::after to let us add more text and change the colour.

You can read more and see more examples at https://developer.mozilla.org/en/docs/Web/CSS/Pseudo-elements