🔥 NEW! Get my book The Developer's Guide to Having a Successful Blog

In this book I teach you all I know about starting and growing a blog.
Launch promo: 25% OFF until tomorrow! And a special challenge for you!

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.

::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:

Pseudo-element Targets
::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!";
}