Skip to content

CSS Pseudo Elements

New Courses Coming Soon

Join the waiting lists

Learn the basics of 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.

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

::aftercreates a pseudo-element after the element
::beforecreates a pseudo-element before the element
::first-lettercan be used to style the first letter of a block of text
::first-linecan be used to style the first line of a block of text
::selectiontargets 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!";
→ Get my CSS Handbook
→ Read my CSS Tutorial on The Valley of Code

Here is how can I help you: