CSS Pseudo-elements: Style Parts and Add Decorative Content

A CSS pseudo-element lets you style a specific part of an element or create a small decorative box that is not written as a separate HTML element. Common examples include ::before, ::after, ::marker and ::selection.

Quick answer: Write a pseudo-element after a selector with a double colon, such as .notice::before. Use it for visual details and styling parts of content; keep important words and information in the HTML.

Add a decorative detail with ::before and ::after

::before and ::after create generated boxes at the beginning or end of an element’s content. They need a content declaration to appear. A background shape or small icon can add decoration without an extra wrapper element.

.notice {
  position: relative;
  padding-left: 1rem;
}

.notice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 4px;
  background: #d96b12;
}

Here an empty string creates the decorative box while the notice’s readable text remains in the HTML. This keeps the message available if generated styling is unavailable or a person uses assistive technology.

Style list markers with ::marker

The ::marker pseudo-element targets the bullet or number before a list item. It can change marker color, size, or content while leaving the list itself semantic and usable.

li::marker {
  color: #a44700;
  font-weight: 700;
}

ol li::marker {
  content: counter(list-item) ". ";
}

Keep list text as real list items. The marker changes presentation; it does not replace the content or list structure.

Style selected text with ::selection

The ::selection pseudo-element styles the part of text a visitor selects. Choose foreground and background colors with enough contrast to keep highlighted text readable.

::selection {
  color: #fff;
  background: #244c69;
}

Pseudo-elements and pseudo-classes

A pseudo-element targets a part or generated box, such as p::first-line. A pseudo-class selects an element in a state or position, such as a:hover. They can be combined: a:hover::after styles an element’s generated after-box while the link is hovered.

CSS pseudo-element questions

What is the difference between ::before and :before?

The double-colon form identifies a pseudo-element in modern CSS. The single-colon form remains supported for a few older pseudo-elements for backward compatibility, but new styles should use ::before.

Should I put important text in generated content?

No. Use HTML for instructions, labels, warnings, and information people need. CSS-generated content is best for decoration or supplemental visual cues because its exposure and behavior can vary between browsers and assistive technologies.

Practice: decorate a notice

Create a paragraph with a useful notice in the HTML. Use ::before to add a colored border or simple decorative mark, then style a list’s ::marker. Check that the meaning remains clear when you remove the generated decoration and that selected text remains readable.