Skip to content

CSS Pseudo Elements

The Valley of Code

Your Web Development Manual

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:

Pseudo-elementTargets
::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
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)