CSS Pseudo-elements

Pseudo-elements style a particular part of an element or create decorative generated content.

::before and ::after generate styleable boxes associated with an element when content is supplied. ::first-letter styles the first letter of a block’s first formatted line, and ::selection controls some highlighting of selected text.

Generated content is primarily decorative. Important, meaningful information should remain in the HTML so it stays robust for assistive technologies and other user agents.

The double colon distinguishes pseudo-elements from pseudo-classes, for example <code>.label::before</code>.

A small circle is generated before a label.

HTML

<p class="label">New lesson available</p>

CSS

.label { font-weight: 700; color: #1e40af; }
.label::before { content: ""; display: inline-block; width: 9px; height: 9px; background: #14b8a6; border-radius: 50%; margin-right: 9px; }

Rendered output

Observe: The green dot comes from CSS, while the message remains in HTML.

A decorative initial makes the paragraph distinctive.

HTML

<p class="lead">Design starts with readable content and careful spacing.</p>

CSS

.lead { line-height: 1.65; color: #334155; }
.lead::first-letter { color: #7c3aed; font-size: 30px; font-weight: 700; }

Rendered output

Observe: The paragraph stays accessible text; only its first letter is presented differently.

The double colon distinguishes pseudo-elements from pseudo-classes, for example <code>.label::before</code>.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• content is normally required for visible ::before and ::after generated boxes.
• Avoid putting crucial words solely in generated content.

Change the decorative dot into a small square and add a dotted underline to the label.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use pseudo-elements for decoration or parts of existing elements, not critical semantic content.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.