CSS Pseudo Elements: 5 Essential Patterns to Know

Learning to keep your HTML clean and semantic is a core skill, and mastering CSS Pseudo elements is one of the best ways to do it.

You know that feeling when you’re looking at your HTML, and it’s just… messy? You’ve got empty <div>s floating around just to hold a little decorative line, or extra <span> tags for icons that feel like they’re cluttering up your nice, semantic structure. I’ve been there too. That’s the exact headache CSS Pseudo elements were made to cure.

Think of them as your CSS’s magic trick. They let you reach into an element and style a specific part of it, like adding a flourish before the content, or styling just the very first letter, all without touching your HTML. It’s the difference between HTML that’s filled with presentation junk and HTML that’s clean, meaningful, and a joy to work with.

I want to walk you through five ways I use pseudo-elements that have honestly changed how I write CSS. These aren’t just academic examples, they’re recipes I use weekly to solve real design problems.

1. Your New Best Friends: ::before and ::after

These two are the workhorses. They create virtual elements you can style, sitting right before or after your actual element’s content. They’re perfect for all the little visual bits that don’t belong in your content layer.

The old, clunky way: Stuffing icons and decorative bits into your HTML with extra tags.
The clean, modern way: Letting CSS handle the decoration.

css

/* Add an external link icon automatically */
.external-link::after {
  content: " ↗"; /* This 'content' property is the whole key */
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.9em;
  color: #6366f1;
}

/* Create a fancy, vertical accent bar for blockquotes */
.quote {
  position: relative; /* The anchor for our pseudo-element */
  padding-left: 1.5rem;
}
.quote::before {
  content: ""; /* Can be empty if you just want a box */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #8b5cf6, #3b82f6);
  border-radius: 2px;
}

/* Make a highlight background that extends beyond the text */
.callout {
  position: relative;
  padding: 1rem;
}
.callout::before {
  content: "";
  position: absolute;
  z-index: -1; /* Send it behind the text */
  inset: -8px; /* Cool shorthand for top/right/bottom/left */
  background-color: #fef3c7;
  border-radius: 12px;
  opacity: 0.7;
}

The big rule, you must include the content property, even if it’s just empty quotes (""). That’s what creates the pseudo element. Using position: absolute on it, with the parent set to position: relative, is your go-to move for precise positioning. It keeps everything neatly contained in the CSS. When you’re ready to dive deeper, the MDN guide on ::before has all the nitty-gritty details.

2. Fancy Typography, No Span Soup (::first-letter, ::first-line)

Want a drop cap that looks like it’s from a classic novel? Or to make the first line of a paragraph stand out? These pseudo elements target exactly those parts, automatically.

The tedious method: Wrapping the first letter in a <span class="drop-cap">.
The elegant method: One line of CSS that just works.

css

/* Create an instant, magazine-style drop cap */
.story-opening::first-letter {
  float: left;
  font-size: 5em;
  line-height: 0.8;
  margin: 0.05em 0.1em 0 0;
  font-weight: 900;
  color: #1e40af;
}

/* Emphasize the first line of an article excerpt */
.article-teaser::first-line {
  font-variant: small-caps;
  font-weight: 650;
  letter-spacing: 0.3px;
  color: #111827;
}

The coolest part? These are responsive. ::first-line will always style exactly what the user sees as the first line, whether they’re on a phone or a giant monitor. It’s truly semantic styling. Just remember, ::first-line is picky, it loves color and font properties but gets fussy with things like margin or padding.

3. Ditch the Boring List Bullets (::marker)

Black dots. Plain numbers. For years, customizing list markers was a huge pain. The ::marker pseudo element finally fixed that, letting you style the bullet or number directly.

The fragile old hack: list-style-image: url('my-bullet.png').
The simple, robust control: Style the marker with CSS.

css

/* Just color the default bullets/numbers */
.feature-list li::marker {
  color: #8b5cf6; /* Purple bullets! */
  font-weight: bold;
}

/* Replace the bullets entirely with checkmarks */
.todo-list li::marker {
  content: "✓ "; /* Override the default */
  color: #10b981;
  font-size: 1.3em;
}

This is especially powerful for ordered lists (<ol>). Want green, bold numbers? It’s two lines of CSS. No more wrestling with counters or generated content hacks. It’s straightforward and much easier to maintain.

4. Brand Your Text Selection (::selection)

Here’s a tiny detail most people miss. When someone highlights text on your site, it usually turns default blue. The ::selection pseudo element lets you make that moment fit your brand.

What users usually see: Bright blue background, white text.
What you can make them see: Your brand’s color palette.

css

/* Change the highlight color across your whole site */
::selection {
  background-color: #a5b4fc; /* A soft indigo */
  color: #1e1b4b;
}

/* A different highlight style for dark mode sections */
.dark-theme ::selection {
  background-color: #c4b5fd;
  color: #0f172a;
}

You can’t go wild here, browsers only allow color, background-color, and text-shadow for performance reasons. But that’s all you need. A subtle, on brand highlight is one of those “why does this feel so nice?” touches that subconsciously elevates your site.

5. Style Those Ghostly Placeholders (::placeholder)

Form placeholder text (<input placeholder="Your email">) comes out looking grey and faded. The ::placeholder pseudo element lets you fix that, improving both readability and aesthetics.

The default: An often too-faint grey.
The improved version: Intentional, readable, styled text.

css

.email-field::placeholder {
  color: #6b7280;
  font-style: italic;
  opacity: 0.9;
}

.search-bar::placeholder {
  color: #9ca3af;
  font-weight: 300;
  letter-spacing: 0.03em;
}

Big accessibility note, your placeholder should still look like a placeholder, secondary and temporary. Never make it the same color or weight as actual input text. It’s a hint, not a label. Always check contrast. For browser support, it’s solid these days, but a quick check on Can I Use for ::placeholder never hurts.

Essential Guidelines for CSS Pseudo elements

After years of using these, here’s what I’ve learned to avoid headaches when working with CSS Pseudo elements.

• content or bust. If you write ::before { } without a content property, nothing will appear. It can be content: "", but it must be there.
• They’re part of the family. A pseudo-element is a child of its host element. If you give the host a border-radius, the pseudo element might overflow unless you plan for it. Setting the host to position: relative is your best friend for controlling ::before/::after.
• Think about screen readers. Content you add via ::before or ::after is usually read aloud. Use it for decorative flourishes, not crucial information. For purely visual additions, you can add aria-hidden="true" to the host element.
• Know their limits. You can’t put a margin on ::first-line. ::selection only likes a few properties. That’s okay, work within their superpowers.
• Use the double colon. It’s ::before, not :before. The single colon works, but the double colon is the modern standard and helps distinguish pseudo elements from pseudo classes (like :hover).

Start small. Pick one thing, maybe the external link icons or custom list bullets, and replace your old HTML heavy method with a pseudo element. You’ll immediately see how much cleaner your code feels.

Getting comfortable with CSS Pseudo elements is like learning to keep your HTML lean and mean. It lets your CSS carry the visual weight, which is exactly where it should be. Your components become more reusable, your files easier to read, and your designs just feel more polished. It’s one of those skills that quietly makes you a better front-end developer.

New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily

[INSERT_ELEMENTOR id=”122″]