Pseudo-elements

Pseudo-elements are different from pseudo-classes. A pseudo-class targets an element's state. A pseudo-element targets a part of an element — like the first letter, or content before or after the element. You can spot them by the double colon ::.

::first-line and ::first-letter

These let you style just the first line or first letter of a block of text. They are perfect for typographic flourishes like drop caps.

p::first-line {
  font-weight: bold;
  color: #2c3e50;
}

p::first-letter {
  font-size: 3em;
  float: left;
  margin-right: 5px;
  color: #e74c3c;
}
    

The first letter gets the treatment of a classic book — big, red, floating to the left. The first line is bold and darker. All done without touching the HTML.

::before and ::after

::before and ::after create child elements that you can style however you want. They are invisible in the HTML but appear on the page. And they come with a special content property.

a::after {
  content: " →";
  color: #3498db;
}

.quote::before {
  content: "\201C"; /* opening curly quote */
  font-size: 4em;
  color: #ccc;
}
    

The content property is required for ::before and ::after to work. Even if you just want a decorative shape, you need content: "" with an empty string.

Using ::before and ::after for Design

These pseudo-elements are incredibly useful for decorative elements like badges, icons, overlays, and custom bullets:

li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #3498db;
  border-radius: 50%;
  margin-right: 8px;
}
    

Each list item now has a custom blue dot instead of the default bullet. Clean, no extra HTML needed.