John Mwaniki /   20 Apr 2023

What are pseudo-elements in CSS?

As a web developer, you may have encountered the term "pseudo-elements" or something like ::before or ::after in CSS. If you're not familiar with them, don't worry. This article will explain all you need to know about CSS pseudo-elements.

What are CSS pseudo-elements?

CSS pseudo-elements are keywords added to CSS selectors that let add content to an element or style a specific part of the selected element(s). They are indicated by a double colon (::) followed by the pseudo-element name.

Syntax

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

Some of the common ways you can use pseudo-elements include:

• • Inserting content before, or after the content of HTML elements
• • Styling the first letter or line of an element
• • Changing the default selection color on web page content

All Pseudo Elements

Below is a list of all pseudo-elements in CSS:

• • ::before
• • ::after
• • ::first-letter
• • ::first-line
• • ::selection
• • ::marker
• • ::placeholder

::before

This is used to add content before the content of an element. For example, you can add a FontAwesone icon before the text on a button using Unicode.

button {
  background-color: green;
  color: #fff;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
}
button::before {
  content: "\f1d8";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

<button>Submit Message</button>

Submit Message

::after

This pseudo-element is used to add content after the content of an element. For example, you can use it to add a caret (arrow down symbol) after a link text for navigation menu links that have submenus.

a::after {
  content: "\f0d7";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

<a href="#">Sample link</a>

Sample link

::first-letter

Used to style the first letter of the text content of an element. For example, you can make the first letter of a paragraph larger, bold, or to have a different color.

p::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: green;
}

<p>The quick brown fox jumps over the lazy dog</p>

The quick brown fox jumps over the lazy dog

::first-line

Used to style the first line of the text content of an element. For example, you can change the color of the first line of a paragraph.

p::first-line {
  color: orange;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

::selection

Used to style the selected text by the user on a web page. For example, you can change the background and color of the selected text.

p::selection {
  background-color: orange;
  color: black;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

::marker

This pseudo-element is used to select and style the marker of a list item, ie the bullets (in the case of an unordered list) or numbers (for ordered lists).

::marker {
  color: purple;
}

• Orange
• Banana
• Apple

1. Orange
2. Banana
3. Apple

::placeholder

A placeholder is a text used in form elements such as <input> and <textarea> created using the placeholder attribute for giving hint to users on what kind or format of data is expected in that particular field.

The ::placeholder pseudo-element allows you to select and style the placeholder text.

input::placeholder {
  color: orange;
}

That's it!

Now you know what pseudo-elements are in CSS and how they are used in website development.