🎭 Must-Know CSS Pseudo-elements (and When to Use Them)

#webdev #css

If you’ve ever styled a placeholder inside an <input>, you’ve already met a pseudo-element — even if you didn’t realize it.

🤔 What Are Pseudo-elements?

In simple terms: pseudo-elements are "virtual elements" that let you style specific parts of an element that you normally can’t target with regular selectors.

For example, when you do this:

input::placeholder {
  color: silver;
}

You're not styling the whole input — you're specifically targeting the placeholder inside it. That placeholder is a pseudo-element.

All pseudo-elements start with a double colon ::, like ::before, ::after, or ::selection.

Want to explore the full list? Check out the MDN docs on Pseudo-elements

📋 Common Pseudo-elements You Should Know

Here’s a quick reference table of useful pseudo-elements, what they do, and how important they are (in my opinion 😉):

Pseudo-element	What It Does	Priority
::after	Inserts content after an element	⭐⭐⭐⭐⭐
::before	Inserts content before an element	⭐⭐⭐⭐⭐
::selection	Styles the part of text the user selects	⭐⭐⭐⭐⭐
::file-selector-button	Styles the button inside `<input type="file">`	⭐⭐⭐⭐
::marker	Styles bullets or numbers in lists	⭐⭐⭐⭐
::backdrop	Styles the overlay behind `<dialog>`	⭐⭐⭐
::details-content	Targets the content of a `<details>` element	⭐⭐⭐
::first-letter	Styles the first letter of a block	⭐⭐⭐
::first-line	Styles the first line of text	⭐⭐⭐
::target-text	Highlights text targeted by URL fragment	⭐⭐⭐
::cue	Styles video captions (WebVTT)	⭐⭐
::view-transition and friends	Powers page transition animations	⭐⭐⭐⭐

Note: The priority stars are totally subjective, based on my dev experience. Feel free to disagree or reorder based on your needs.

🧪 How to See Pseudo-elements in Action?

Most browser dev tools (like Chrome and Firefox) let you inspect pseudo-elements directly in the Elements tab. Open DevTools, select an element, and you’ll often see ::before, ::after, or others appear in the sidebar when used.