Pseudo-Elements Overview

Pseudo-elements target specific parts of elements, like the first line of text or the before/after content. They're preceded by double colons (::). Pseudo-elements create new elements without HTML markup.

Common Pseudo-Elements

Pseudo-Element	Targets	Example
::before	Before element content	p::before
::after	After element content	p::after
::first-line	First line of text	p::first-line
::first-letter	First letter of text	p::first-letter
::selection	Selected text	p::selection

CSS

/* ::before and ::after create pseudo-elements */
.quote::before {
  content: '"';
  color: gray;
}

.quote::after {
  content: '"';
  color: gray;
}

/* First line styling */
p::first-line {
  font-weight: bold;
  color: #333;
}

/* First letter (drop cap) */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin-right: 0.1em;
}

/* Selected text */
p::selection {
  background-color: yellow;
  color: black;
}

Practical Uses

CSS

/* Add decorative content */
.highlight::before {
  content: '✨ ';
}

.important::after {
  content: ' ⚠️';
}

/* Clearfix technique */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* Attention grabber */
.new::after {
  content: 'NEW';
  background: red;
  color: white;
  padding: 2px 5px;
  font-size: 12px;
  margin-left: 5px;
}

Note

Pseudo-elements target specific parts of elements or create content. ::before and ::after are most commonly used. They don't add to DOM, keeping HTML clean.

Universal selector: [Universal Selector (*)](/css/universal-selector).