CSS Pseudo Elements Content

::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)