Pseudo-classes & Pseudo-elements

Styling States, Positions & Invisible Parts

So far, every selector you've written targets something that's already sitting in the HTML. Pseudo-classes and pseudo-elements go a step further — they let CSS react to state (is the mouse over it? has this link been visited?), position (is this the first item in a list?), and even generate content that was never written in the markup at all.

• ✓Pseudo-classes use a single colon — like :hover — and target an element's state or position.
• ✓Pseudo-elements use a double colon — like ::before — and target a part of an element, sometimes one that doesn't exist until CSS creates it.
• ✓Both attach directly to a selector with no space: a:hover, li:first-child, p::before.

:hover, :focus & :active

These three pseudo-classes respond to how a person is interacting with an element right now — pointer over it, keyboard focus on it, or actively being clicked.

.btn {
  background: #ffffff;
  color: #b8430a;
  border: 1px solid #e8590c;
  transition: background .15s ease;
}

.btn:hover {
  background: #e8590c;
  color: #ffffff;
}

.btn:focus-visible {
  outline: 3px solid #e85fa0;
}

.btn:active {
  background: #b8430a;
}

Targeting by Position

Structural pseudo-classes select elements based on where they sit among their siblings — no extra class needed.

/* Zebra-stripe a list without adding a single class */
li:nth-child(even) {
  background: #fdefe4;
}

Generating Content With CSS

::before and ::after insert a virtual element just inside the start or end of the element they're attached to. They require a content property — even an empty string — or nothing renders.

/* A decorative quote mark that isn't in the HTML */
.quote::before {
  content: "“";
  color: #e8590c;
  font-size: 2rem;
}

/* A "NEW" badge pinned to a corner */
.badge::after {
  content: "NEW";
  position: absolute;
  top: -8px;
  right: -10px;
}

::placeholder, ::selection & ::first-letter

Beyond ::before and ::after, a handful of pseudo-elements target specific browser-rendered parts of an element.

Pseudo-elements Are Decoration, Not Content

Content generated with the content property is invisible to screen readers and can't be selected as real text. It's fine for decorative marks, icons, and visual flourishes — never for information the user actually needs to read.

Breaking Down What You Just Learned

Try It Yourself

Build an Interactive List & Badge

Recap

Key Takeaways