Pseudo Element In Css

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.

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.