Comprehensive Guide to CSS Pseudo-Elements

CSS pseudo-elements allow you to style specific parts of an element’s content. Here’s a comprehensive list of commonly used CSS pseudo-elements:

::after

Inserts content after an element’s content.

p::after {
  content: " after";
}

::before

Inserts content before an element’s content.

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

::first-letter

Styles the first letter of an element.

p::first-letter {
  font-size: 2em;
}

::first-line

Styles the first line of an element.

p::first-line {
  font-weight: bold;
}

::selection

Styles the portion of an element that has been highlighted by the user (selected).

::selection {
  background: yellow;
}

::backdrop

Styles the background of a modal element.

dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

::placeholder

Styles the placeholder text of an input element.

input::placeholder {
  color: gray;
}

::marker

Styles the marker box of a list item.

li::marker {
  color: red;
}

::cue

Styles WebVTT cues.

::cue {
  color: white;
  background: black;
}

::cue-region

Styles regions containing WebVTT cues.

::cue-region {
  background: rgba(0, 0, 0, 0.5);
}

::slotted

Styles elements that are assigned to a slot inside a shadow DOM.

::slotted(span) {
  color: blue;
}

::spelling-error

Styles text that has a spelling error in browser spell-checking.

::spelling-error {
  text-decoration: underline red wavy;
}

::grammar-error

Styles text that has a grammar error in browser spell-checking.

::grammar-error {
  text-decoration: underline green wavy;
}

::part()

Styles parts of an element defined with the part attribute.

::part(header) {
  background: lightblue;
}

---

These headings provide a structured way to understand and reference the different CSS pseudo-elements.