CSS by EezyTutorials

CSS - Pseudo-elements

Print this lesson
Back to top ↑

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10 minutes

Pseudo-elements style parts of elements or insert generated content without extra markup.

Learning Objectives

  • Use ::before and ::after for badges and decoration.
  • Style typographic parts like ::first-line and list ::marker.

Details & Examples

Pseudo-elements let you style parts of an element or insert generated content.

  • ::before / ::after for decoration and badges
  • ::first-line, ::first-letter for typographic effects
  • ::marker to style list bullets
  • ::selection to style text selection

Pseudo-elements demo paragraph for selection and first-line.

  • Item A
  • Item B
  • Item C

Checks for Understanding

  1. How would you add a decorative bullet without extra markup?
Show answers
  1. Use ::before or ::marker depending on context.

Exercises

  1. Add a "NEW" badge before a product title using ::before.
  2. Style list ::marker with a brand color.
Suggested answers
  1. .title::before{ content:"NEW"; ... }
  2. li::marker{ color: #22c55e; }
« Prev: CSS - Pseudo-classes Next: CSS - Specificity & !important »