Modern CSS

Pseudo-Elements

Use pseudo-elements like before, after, selection, and marker to style parts of elements without extra wrapper tags.

By TechCoder TeamLast updated: 2026-06-02
In a Nutshell

Use pseudo-elements like before, after, selection, and marker to style parts of elements without extra wrapper tags. This hands-on tutorial focuses on practical implementation of pseudo-elements concepts.

Pseudo-Elements

Pseudo-elements style part of an element or inject decorative content without changing the HTML structure.

The Most Common Two

.badge::before {
  content: "New";
  margin-right: 0.5rem;
  color: #2563eb;
  font-weight: 700;
}

.link::after {
  content: " ->";
}

::before and ::after are perfect for accents, icons, overlays, and helper labels.

Text and List Styling

::selection {
  background: #bfdbfe;
  color: #0f172a;
}

li::marker {
  color: #2563eb;
}

This makes text selection and list presentation feel more branded.

Decorative Overlay Pattern

.card {
  position: relative;
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.15), transparent);
  pointer-events: none;
}

Practical Rules

  • keep pseudo-elements decorative unless generated content is truly meaningful
  • remember content is required for ::before and ::after
  • combine with positioning carefully so layers stay predictable

Next Step

Continue to Container Queries to make components respond to their own available space, not only the viewport.