Pseudo elements are an interesting part of CSS. They allow you to make a lot of small tweaks to your design. Yet, especially beginners might be confused by them at first.

For that reason, in this blog post, we want to talk about them in detail. In the following, we will give you a beginner’s guide to CSS pseudo elements. We will explain what they are, how they work, and what you can use them for. The post will conclude with examples of how to use the most common pseudo elements.

In the end, we want you to feel empowered and capable to make them part of your CSS repertoire.

What Are CSS Pseudo Elements?

In order to explain what pseudo elements are, it’s best to start with an example. Here’s a very simple HTML page with a link to a style sheet and a single paragraph element on it.

  	 		 	 	 		
CSS pseudo-element test

However, when we look at the page in a browser, it comes out like this:

css pseudo elements example

You will probably notice the arrow in front of the paragraph that appears even though it’s not present in the HTML document. That’s because the linked style sheet contains the following markup:

p::before { 	content: "→ "; }

Above is a rather standard looking CSS selector. However, what stands out are the double colon plus before behind it. That’s our pseudo element.

In this case, it does a very simple thing, it adds an element in front of the inner HTML of the target selector and places the content defined in its value. In this case that’s an arrow and the targeted element is every paragraph element on the page.

The interesting thing, however, is that the arrow does not show up in the HTML itself. Instead, you only see a pseudo element and can check its content. Here is what that looks like in the browser developer tools:

css pseudo elements in browser developer tools

This tendency to behave like elements without being so is how pseudo elements get their name. It also has some bearing on their behavior as we will see in the examples below.

For now, just need to get familiar with the basic markup for using pseudo elements:

selector::pseudo-element { 	property: value; }

We will get into more specifics below.

Available Pseudo Elements

Besides the above-mentioned ::before element, the other most popular pseudo element is ::after. As its name suggests, it does the same things as ::before but instead creates child elements at the end of its target.

Besides those two, there are also these elements:

  • ::backdrop – Creates a box that is as large as the user viewport that allows you to style the background of any element that is turned to full-screen, such as videos.
  • ::cue – You can use this to style WebVTT cues, meaning things like subtitles and captions inside videos.
  • ::first-letter – Targets the first letter of the first line in a block-level element (e.g. p, h2, div). This can also mean inside a ::before element.
  • ::first-line – Same as ::first-letter but targeting the entire first line of a block element.
  • ::file-selector-button – Creates a button of an element of type="file".
  • ::marker – Enables you to style the markers of list items, such as in bulleted or numbered lists.
  • ::part() – Allows you to target specific HTML elements inside a shadow tree marked with "part=" by name. Shadow-tree elements are added via JavaScript. More information here.
  • ::placeholder – Use this to style the placeholder text inside and