HTML and CSS Reference
In-Depth Information
What Does A Pseudo-Element Do?
A pseudo-element does exactly what the word implies. It creates a phoney
element and inserts it before or after the content of the element that you've
targeted.
The word “pseudo” is a transliteration of a Greek word that basically means
“lying, deceitful, false.” So, calling them
pseudo
-elements is appropriate,
because they don't actually change anything in the document. Rather, they
insert ghost-like elements that are visible to the user and that are style-able
in the CSS.
Basic Syntax
The
:before
and
:after
pseudo-elements are very easy to code (as are
most CSS properties that don't require a ton of vendor prefixes). Here is a
simple example:
#example:before {
content: "#";
}
#example:after {
content: ".";
}
There are two things to note about this example. First, we're targeting the
same element using
#example:before
and
#example:after
. Strictly
speaking, they are the pseudo-elements in the code.
Secondly, without the
content
property, which is part of the generated
content module in the specification, pseudo-elements are useless. So, while
the pseudo-element selector itself is needed to target the element, you
won't be able to insert anything without adding the
content
property.
