What are pseudo-elements in CSS?

The short answer

Pseudo-elements let you style a specific part of an element without adding extra HTML. They use the :: syntax and create a "virtual" element that you can style. The most common ones are ::before and ::after, which insert content before or after an element's content.

::before and ::after

These create child elements that do not exist in the HTML:

.quote::before {
  content: '"';
  font-size: 2rem;
  color: gray;
}

.quote::after {
  content: '"';
  font-size: 2rem;
  color: gray;
}

<p class="quote">Hello, world</p>
<!-- Renders as: "Hello, world" with styled quotes -->

The content property is required — without it, the pseudo-element does not appear.

Common use cases

Decorative elements:

.button::after {
  content: '→';
  margin-left: 8px;
}

Custom list bullets:

li::before {
  content: '✓';
  color: green;
  margin-right: 8px;
}

Overlay on images:

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.5)
  );
}

Clearfix (clearing floats):

.container::after {
  content: '';
  display: table;
  clear: both;
}

Other pseudo-elements

::first-line — styles the first line of text:

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

::first-letter — styles the first letter (drop caps):

p::first-letter {
  font-size: 3rem;
  float: left;
  margin-right: 4px;
}

::placeholder — styles input placeholder text:

input::placeholder {
  color: gray;
  font-style: italic;
}

::selection — styles text the user selects:

::selection {
  background: #ffeb3b;
  color: black;
}

Pseudo-elements vs pseudo-classes

• Pseudo-elements (::before, ::after) create virtual elements to style
• Pseudo-classes (:hover, :focus, :first-child) select elements based on state or position

/* Pseudo-class — selects existing element in a state */
a:hover {
  color: red;
}

/* Pseudo-element — creates a virtual element */
a::after {
  content: ' ↗';
}

Why interviewers ask this

This tests CSS knowledge beyond the basics. Pseudo-elements are used constantly for decorative styling without extra HTML markup. Interviewers want to see if you can use them for practical things like icons, overlays, and custom bullets.