Back to Lessons

CSS Pseudo Elements Content

April 5, 2026

::before ::after Magic

Generate content, decorative elements, counters.

Pseudo Element Examples

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  background: black;
  color: white;
  padding: 8px;
}

.list-item::before {
  content: counter(list-counter) ".";
  counter-increment: list-counter;
}

Common Patterns

  • Custom checkboxes/radios
  • Decorative arrows/triangles
  • Tooltip content generation
  • List numbering (no JS)
Previous Lesson Next Lesson