Pseudo-Elements

🎨 CSS3+ 🟢 Chapter 6 of 49 📂 Phase 02: Selectors 📅 2026 Edition

📌 Covered in this chapter: ::before · ::after · ::first-letter · ::first-line · ::selection · ::placeholder · Decorative Content · Icons · Accessibility · Common Mistakes

Welcome to Chapter 6: Pseudo-Elements — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.

1Pseudo-Classes vs Pseudo-Elements

Type	Syntax	Purpose
Pseudo-class	`:hover`	Element state (existing element)
Pseudo-element	`::before`	Virtual sub-part of element create/style

CSS selectors element patterns ni match chesi styles apply chestayi; specificity and combinators selector behavior ni decide chestayi. Pseudo-elements decorative content and typography effects ki powerful.

2::before & ::after — Decorative Content

Virtual elements create chestayi — icons, badges, decorative lines. content property mandatory:

CSS▶ Try in Editor

.quote::before {
  content: "\201C";
  font-size: 3rem;
  color: #3b82f6;
  line-height: 0;
}

.external-link::after {
  content: " ↗";
  font-size: 0.85em;
}

Icons with pseudo-elements: Unicode symbols or icon fonts use cheyochu. SVG background-image kuda common pattern.

3::first-letter, ::first-line, ::selection, ::placeholder

CSS

p::first-letter {
  font-size: 3em;
  font-weight: 700;
  float: left;
  margin-right: 8px;
  color: #2563eb;
}

p::first-line {
  font-variant: small-caps;
}

::selection {
  background: #bfdbfe;
  color: #1e3a8a;
}

input::placeholder {
  color: #94a3b8;
  font-style: italic;
}

4Accessibility & Common Mistakes

♿ Accessibility Considerations

::before/::after content screen readers read cheyochu — decorative ayite aria-hidden on parent consider cheyandi
Important information pseudo-elements lo matrame pettakandi — real HTML lo undali
::selection contrast sufficient ga maintain cheyandi

⚠️ Common Pseudo-Element Mistakes

content property marchakapovadam — pseudo-element render avvadu
Single colon :before (old CSS2 syntax) — modern lo ::before use cheyandi
Replacing semantic HTML with ::before content for labels/icons

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy · CSS Complete Roadmap · Last updated August 2026