CSS Pseudo-elements

A CSS pseudo-element selects and styles a specific part of an HTML element. For example, you can style the first letter of a paragraph or insert a decorative icon without adding another HTML tag.

Pseudo-elements usually use two colons (::).

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

Pseudo-elements are different from pseudo-classes:

• A pseudo-class styles an element in a particular state, such as button:hover.
• A pseudo-element styles a specific part of an element, such as p::first-letter.

The ::before Pseudo-element

The ::before pseudo-element adds content before an element's existing content.

.note::before {
  content: "💡 ";
}

<p class="note">Remember to save your work.</p>

The light bulb appears before the text. The content property is required when using ::before.

It is useful for adding:

• Icons
• Decorative symbols
• Labels
• Quotation marks

The ::after Pseudo-element

The ::after pseudo-element adds content after an element's existing content.

.required::after {
  content: " *";
  color: red;
}

<label class="required">Email address</label>

A red star appears after the label to show that the field is required.

The inserted content is mainly decorative. Important information should also be available in the HTML for accessibility.

Creating Decorative Elements

The ::before and ::after pseudo-elements can also create shapes and design effects.

.heading::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin-top: 6px;
  background-color: #1f4ed8;
}

This creates a small blue line below the heading without adding an extra HTML element.

The ::first-letter Pseudo-element

The ::first-letter pseudo-element styles the first letter of a block of text.

.article::first-letter {
  font-size: 40px;
  font-weight: bold;
  color: #1f4ed8;
}

This creates a large opening letter, similar to styles commonly seen in magazines and storybooks.

The ::first-line Pseudo-element

The ::first-line pseudo-element styles only the first visible line of text.

.introduction::first-line {
  font-weight: bold;
  color: darkblue;
}

The selected line may change when the screen size or text container width changes.

Only certain text-related properties can be used with ::first-line, including:

• color
• font-size
• font-weight
• letter-spacing
• word-spacing

The ::selection Pseudo-element

The ::selection pseudo-element changes the appearance of text highlighted by the user.

p::selection {
  background-color: #1f4ed8;
  color: white;
}

When users select paragraph text, it receives a blue background and white text colour.

You can apply it to the whole page:

::selection {
  background-color: gold;
  color: black;
}

The ::placeholder Pseudo-element

The ::placeholder pseudo-element styles the hint displayed inside an empty form field.

input::placeholder {
  color: #777;
  font-style: italic;
}

<input type="email" placeholder="Enter your email">

Make sure the placeholder colour has enough contrast to remain readable.

The ::marker Pseudo-element

The ::marker pseudo-element styles the bullet or number of a list item.

li::marker {
  color: #1f4ed8;
  font-size: 20px;
}

It works with both ordered and unordered lists.

Pseudo-elements make it possible to style small parts of an element and add decorative details while keeping the HTML clean and simple.