CSS Pseudo-elements

A pseudo-element targets a specific part of an element, using a double colon (::) to distinguish it from pseudo-classes.

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

p::first-letter {
  font-size: 2em;
  color: #4f46e5;
}

.quote::before {
  content: "\201C";  /* opening curly quote */
}

.quote::after {
  content: "\201D";  /* closing curly quote */
}

::before and ::after insert generated content immediately inside an element (they need a content property, even if it's empty) — commonly used for decorative icons, tooltip arrows, or the little "required" asterisk after a form label, without adding an extra HTML element just for styling.