Pseudo-Elements

Learning objectives#

• Add decorations with ::before and ::after
• Style parts of text with ::first-letter and ::first-line
• Style placeholders, selections and list markers
• Know when content belongs in HTML instead

Explanation#

Pseudo-elements use two colons: p::first-line. They target something that is not a real element in the HTML.

::before and ::after insert a box as the first or last child of an element. They need content: "" to appear, even if empty.

::first-letter styles the first letter (drop caps); ::first-line styles the first line, whatever its length.

::placeholder styles input hint text; ::selection styles highlighted text; ::marker styles list bullets and numbers.

Content added with ::before/::after is decoration. Screen readers may or may not read it, and users cannot copy it — keep real information in HTML.

Code example: Decorations without extra HTML#

1<style>
2  body { font-family: Georgia, serif; max-width: 60ch; }
3  .story::first-letter { float: left; font-size: 3.2em; line-height: 1; padding-right: 6px; color: #b45309; }
4  .story::first-line { font-variant: small-caps; }
5

6  .required::after { content: " *"; color: #dc2626; }
7  a[href^="http"]::after { content: " ↗"; font-size: 0.8em; }
8

9  .quote { position: relative; padding-left: 28px; font-style: italic; }
10  .quote::before { content: "“"; position: absolute; left: 0; top: -12px; font-size: 3rem; color: #94a3b8; }
11

12  ul.ticks li::marker { content: "✓  "; color: #16a34a; }
13  ::selection { background: #fde68a; }
14  input::placeholder { color: #94a3b8; font-style: italic; }
15</style>
16

17<p class="story">Once upon a time in a small village by the river, there lived a potter who made the most beautiful lamps in the land.</p>
18<label class="required">Email</label> <input placeholder="you@example.com">
19<p>Read more on <a href="https://developer.mozilla.org">MDN</a>.</p>
20<p class="quote">Simplicity is the soul of efficiency.</p>
21<ul class="ticks"><li>Fast</li><li>Accessible</li></ul>

A story with a large orange drop cap and small-caps first line, a red asterisk after “Email”, an arrow after the external link, a big decorative quote mark, green tick bullets and yellow text selection.

Step-by-step explanation#

1. ::first-letter floats a large first letter for a classic drop cap.
2. .required::after adds a red asterisk without editing every label.
3. a[href^="http"]::after marks external links automatically.
4. .quote::before draws a decorative quote mark positioned in the padding.
5. ::marker replaces the default bullets with ticks.
6. ::selection changes the highlight colour when text is selected.

Real-world use case#

Common mistakes#

Best practices#

• Use pseudo-elements for decoration only
• Use content: "" with width/height for shapes
• Use two colons for pseudo-elements, one for pseudo-classes
• Remember ::before/::after are children — position: relative on the parent helps place them

Remember this#

Practice exercise#

1h2::before {
2  content: "# ";
3  color: #94a3b8;
4}

Mini quiz#

Want more? Practise all CSS MCQs · CSS interview questions

Related topics#

My notes#

Saved in this browser.