CSS Pseudo Elements

Learn the basics of CSS Pseudo Elements

What are CSS Pseudo Elements?

Pseudo-elements are used to style a specific part of an element.
They start with a double colon ::.

Sometimes you will spot them in the wild with a single colon, but this is only a syntax supported for backwards compatibility reasons. You should use 2 colons to distinguish them from pseudo-classes.

Download The PDF

Using ::before and ::after

::before and ::after are probably the most used pseudo-elements. They are used to add content before or after an element, like icons for example.

Here’s the list of the pseudo-elements:

::after

creates a pseudo-element after the element

::before

creates a pseudo-element before the element

::first-letter

can be used to style the first letter of a block of text

::first-line

can be used to style the first line of a block of text

::selection

targets the text selected by the user

Let’s do an example. Say you want to make the first line of a paragraph slightly bigger in font size, a common thing in typography:

p::first-line { font-size: 2rem; }

Or maybe you want the first letter to be bolder:

p::first-letter { font-weight: bolder; }

::after and ::before are a bit less intuitive. I remember using them when I had to add icons using CSS. You specify the content property to insert any kind of content after or before an element:

p::before { content: url(/myimage.png); } .myElement::before { content: "Hey Hey!"; }