Adding Pseudo-Elements with ::before and ::after

In this lesson you'll learn how to add pseudo-elements using ::before and ::after, so you can add decoration without adding more HTML. This is for people searching "CSS before after usage."

::before and ::after are pseudo-elements that let you add decorative content before or after an element using only CSS, without adding more HTML. You specify what's displayed with the content property. This is handy when you want to add a label or icon-like decoration.

The sample code adds a star mark before the text with .badge::before, and text signaling the end of a quote after the text with .quote::after. Notice that these decorative characters aren't written anywhere in the HTML at all.

A common beginner stumbling block is forgetting the content property. Without content, the pseudo-element exists but nothing is displayed. Even when you want to create an empty pseudo-element, you need to explicitly specify an empty string, like content: "";.

The advantage is being able to keep the text itself simple, while managing purely visual decoration together on the CSS side. This is a technique frequently used when working out fine visual details, like a star mark or a decorative quote line.