::before and ::after — 7 CSS Tricks Without Extra HTML

Every element gives you two free bonus elements. ::before and ::after need only a content property to exist — then style them like anything else.

1. Animated underline

a { position: relative; }
a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: currentColor;
  transition: width 0.25s;
}
a:hover::after { width: 100%; }

2. Notification dot

.bell::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 8px; height: 8px; border-radius: 50%; background: red;
}

3. Image overlay for text contrast

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

More one-liners

• Quote marks: blockquote::before { content: '"'; }
• Required asterisk: label.req::after { content: ' *'; color: red; }
• Numbered lists with CSS counters
• Pure-CSS tooltips from content: attr(data-tip)

Try them in the Playground. Full lesson: Pseudo-classes & Elements.