CSS Pseudo-elements

What Are CSS Pseudo-elements?

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of an element. Pseudo-elements usually use double colon syntax ::.

.button::before {
  content: "→";
  margin-right: 0.5rem;
}

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

In these examples, ::before adds generated content before a button’s text, and ::first-line styles the first line of a paragraph.

Why CSS Pseudo-elements Are Important

• They reduce unnecessary extra HTML for decorative content.
• They help create icons, labels, overlays, ribbons, and separators.
• They allow styling of specific text parts like first letter and first line.
• They improve list styling with custom markers.
• They support better UI polish without JavaScript.
• They help build reusable component styles.
• They keep HTML cleaner when used for decoration only.

CSS Pseudo-elements Cheatsheet

The following table explains the most commonly used CSS pseudo-elements.

CSS Pseudo-element Syntax

Pseudo-elements are written after the selector using double colon syntax.

selector::pseudo-element {
  property: value;
}

Example:

.badge::before {
  content: "New";
  display: inline-block;
}

Older CSS examples may show single colon syntax like :before, but modern CSS commonly uses ::before and ::after.

::before Pseudo-element

The ::before pseudo-element inserts generated content before an element’s actual content.

.external-link::before {
  content: "↗";
  margin-right: 0.35rem;
}

It is useful for decorative icons, labels, separators, quote marks, and visual indicators.

::after Pseudo-element

The ::after pseudo-element inserts generated content after an element’s actual content.

.required-label::after {
  content: " *";
  color: #dc3545;
}

Use ::after for small visual cues such as required symbols, arrows, badges, dividers, and decorative underlines.

The CSS content Property

The content property is required for ::before and ::after to generate visible content.

.decorative-line::after {
  content: "";
  display: block;
  width: 4rem;
  height: 3px;
  background-color: #0d6efd;
  margin-top: 0.75rem;
}

When creating decorative shapes, use content: "";.

Decorative Icons with ::before and ::after

Pseudo-elements are often used for decorative icons.

.check-item::before {
  content: "✓";
  color: #198754;
  margin-right: 0.5rem;
}

.arrow-link::after {
  content: " →";
}

Use generated icons only for decoration. Important meaning should exist in real HTML text.

Overlay Effect with ::before

Pseudo-elements can create overlays without extra HTML elements.

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

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.hero-content {
  position: relative;
  z-index: 1;
}

This pattern is common for hero sections, cards, banners, and image overlays.

Custom Underline with ::after

You can create animated or decorative underlines using ::after.

.nav-link {
  position: relative;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.2s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

Pair hover effects with focus-visible effects for better keyboard accessibility.

::first-letter Pseudo-element

The ::first-letter pseudo-element styles the first letter of a text block.

.article-intro::first-letter {
  font-size: 3rem;
  font-weight: 700;
  float: left;
  line-height: 1;
  margin-right: 0.5rem;
}

This is useful for magazine-style drop caps and editorial designs.

::first-line Pseudo-element

The ::first-line pseudo-element styles the first rendered line of text.

.summary::first-line {
  font-weight: 700;
  color: #0d6efd;
}

The first line can change depending on container width, font size, and screen size.

::marker Pseudo-element

The ::marker pseudo-element styles bullets and numbers in lists.

li::marker {
  color: #0d6efd;
  font-weight: 700;
}

Use ::marker for custom list styling without replacing semantic list markup.

::selection Pseudo-element

The ::selection pseudo-element styles text selected by the user.

::selection {
  background-color: #0d6efd;
  color: #ffffff;
}

Keep selected text readable with strong contrast.

::placeholder Pseudo-element

The ::placeholder pseudo-element styles placeholder text inside form controls.

input::placeholder,
textarea::placeholder {
  color: #6c757d;
  opacity: 1;
}

Placeholder text should not replace visible labels. Use labels for accessibility.

::backdrop Pseudo-element

The ::backdrop pseudo-element styles the background layer behind modal dialogs.

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

This is useful for native HTML <dialog> elements.

Pseudo-elements vs Pseudo-classes

Pseudo-elements and pseudo-classes are different.

CSS Pseudo-elements and Accessibility

• Do not use pseudo-elements for important readable content.
• Keep essential text inside real HTML.
• Use pseudo-elements mainly for decoration and visual enhancement.
• Do not rely on generated icons alone to communicate status.
• Ensure overlays do not reduce text contrast.
• Use real form labels instead of placeholder-only designs.
• Test interactions with keyboard and screen readers.

CSS Pseudo-elements and SEO

Pseudo-elements are useful for visual presentation, but important SEO content should exist in real HTML, not only in generated CSS content.

• Keep headings, links, labels, and meaningful text in HTML.
• Use pseudo-elements for decorative icons, separators, and visual effects.
• Do not hide important keywords inside content.
• Use semantic HTML first, then enhance with pseudo-elements.
• Good visual polish can improve usability, trust, and engagement.

Common CSS Pseudo-element Mistakes

• Forgetting the content property for ::before or ::after.
• Using pseudo-elements for important text that should be real HTML.
• Not setting position: relative on the parent for absolute pseudo-elements.
• Creating overlays that cover links or buttons accidentally.
• Using generated icons without accessible text.
• Overusing decorative effects that make the UI harder to maintain.
• Confusing pseudo-elements with pseudo-classes.

CSS Pseudo-element Best Practices

• Use double-colon syntax for pseudo-elements.
• Use ::before and ::after for decoration, not essential content.
• Always include content for generated pseudo-elements.
• Use content: ""; for decorative shapes.
• Use semantic HTML before adding visual decoration.
• Keep pseudo-element styles readable and reusable.
• Test overlays, buttons, and links to avoid blocking interaction.
• Keep contrast strong for ::selection, overlays, and placeholders.

Key Takeaways

• CSS pseudo-elements style parts of elements or generated content.
• Pseudo-elements usually use double colon syntax like ::before.
• ::before and ::after require the content property.
• ::first-letter and ::first-line style text parts.
• ::marker, ::selection, ::placeholder, and ::backdrop improve UI styling.
• Important content should stay in real HTML for accessibility and SEO.