Retour au cours

Lesson 43: Pseudo-Elements: Styling Generated Content (::before, ::after)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

43. Pseudo-Elements: Styling Generated Content

Pseudo-elements style parts of an element or insert content before or after an element. They are identified by two colons (::).

1. ::before and ::after

These elements insert content immediately before or immediately after the content of the selected element.

Critical Requirement: ::before and ::after must have a content property defined, even if the value is an empty string (content: '';).

css .quote-block::before { content: '“'; /* Inserts an opening quote / font-size: 4rem; color: #ccc; display: block; / Allows positioning control */ float: left; }

.link::after { content: ' →'; /* Adds an arrow after a link */ }

Common Uses:

  • Adding icons, arrows, or decorative text.
  • Creating visual shapes (e.g., triangles, underline effects).
  • The clearfix hack (historically, though Flexbox/Grid removed the need).

2. ::first-line and ::first-letter

These style only the first line or the first letter of a block-level element, often used for magazine-style drop caps.

css article p::first-letter { font-size: 3rem; font-weight: bold; color: navy; float: left; /* Pulls the letter out for the drop cap effect */ margin-right: 5px; }