After pseudo-element in CSS - Browser Rendering Trace

Render Flow - After pseudo-element

Parse CSS selector with ::after

↓

Create virtual ::after element

↓

Apply styles to ::after

↓

Insert ::after content after element's content

↓

Layout including ::after

↓

Paint ::after

↓

Composite final page

The browser reads the CSS selector with ::after, creates a virtual element after the target element's content, applies styles, and includes it in layout and painting.

Render Steps - 3 Steps

Code Added:<div class="box">Hello</div>

Before

→

After

[ box ]
[Hello]

The HTML element 'div' with class 'box' containing text 'Hello' appears as a simple box with text inside.

🔧 Browser Action:Creates DOM node for div and text node for 'Hello'

Code Sample

A box with the word 'Hello' and a red exclamation mark added after it using the ::after pseudo-element.

CSS

<div class="box">Hello</div>

CSS

.box {
  position: relative;
  padding: 1rem;
  background-color: #def;
}
.box::after {
  content: "!";
  color: red;
  font-weight: bold;
  margin-left: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 3, what do you see visually?

A A red exclamation mark appears immediately after the word 'Hello' with a small space.

B The word 'Hello' disappears and is replaced by a red exclamation mark.

C A red exclamation mark appears before the word 'Hello'.

D No visible change happens after step 3.

Common Confusions - 3 Topics

Why doesn't the ::after content show up if I forget to set content property?

The ::after pseudo-element requires the content property to display anything. Without content, it creates no visible box.

💡 Always set content property (even empty string) to make ::after visible.

Why can't I click or select the ::after content?

::after is part of the element's rendering but not a separate DOM node, so it behaves like part of the element's content and may not respond to pointer events unless styled.

💡 Use pointer-events CSS if you want ::after to respond to clicks.

Why does margin-left on ::after sometimes not create space?

If ::after is inline and the parent has no space or the font size is zero, margin may not appear as expected.

💡 Check display property or add padding for consistent spacing.

Property Reference

Property	Value Applied	Effect on ::after	Common Use
content	"!"	Defines text or symbols inserted after element content	Add decorative or informative text
color	red	Changes text color of ::after content	Highlight or style inserted content
font-weight	bold	Makes ::after content bold	Emphasize inserted content
margin-left	0.5rem	Adds space between original content and ::after content	Separate inserted content visually
position	relative (on parent)	Allows absolute positioning of ::after if needed	Control placement of pseudo-element

Concept Snapshot

The ::after pseudo-element inserts content after an element's text. It requires the content property to show anything. Common styles: color, font-weight, margin for spacing. Parent often uses position: relative for positioning. Useful for adding decorative or informative text without extra HTML.

Practice

1. What does the CSS ::after pseudo-element do?

easy

A. Adds content after an element without changing the HTML

B. Removes the element from the page

C. Changes the background color of an element

D. Makes the element invisible

Solution

1. Step 1: Understand the purpose of ::after

   The ::after pseudo-element inserts content after the selected element in the page layout without modifying the HTML structure.

2. Step 2: Compare with other options

   Options A, C, and D describe different CSS effects unrelated to ::after.

3. Final Answer:

   Adds content after an element without changing the HTML -> Option A

4. Quick Check:

   ::after adds content after element [OK]

Hint: Remember ::after adds content visually, not in HTML [OK]

Common Mistakes:

• Thinking it changes the HTML structure
• Confusing it with visibility or color changes
• Forgetting it needs content property to show

2. Which CSS rule correctly uses ::after to add a red asterisk after a paragraph?

easy

A. p::after { content: '*'; color: red; }

B. p:after { content: '*'; color: red; }

C. p::after { text: '*'; color: red; }

D. p::after { content: '*'; font-color: red; }

Solution

1. Step 1: Check correct pseudo-element syntax

   The modern and correct syntax for the after pseudo-element is ::after, not :after.

2. Step 2: Verify property names

   The property to add text is content, and color is set with color. Options C and D use incorrect properties (text and font-color).

3. Final Answer:

   p::after { content: '*'; color: red; } -> Option A

4. Quick Check:

   Use ::after with content and color [OK]

Hint: Use double colons and 'content' property for ::after [OK]

Common Mistakes:

• Using single colon instead of double (::after vs :after)
• Using wrong property like 'text' instead of 'content'
• Using 'font-color' instead of 'color'

3. What will be the visual output of this CSS?

h1::after { content: ' [check]'; color: green; }

Given HTML: <h1>Task Complete</h1>

medium

A. [check] Task Complete (green check mark before text)

B. Task Complete [check] (green check mark after text)

C. Task Complete (no change visible)

D. Task Complete [check] (check mark in default color)

Solution

1. Step 1: Understand ::after content insertion

   The ::after adds the string ' [check]' after the h1 text, so the check mark appears after "Task Complete".

2. Step 2: Check color styling

   The color property applies to the inserted content, so the check mark will be green.

3. Final Answer:

   Task Complete [check] (green check mark after text) -> Option B

4. Quick Check:

   ::after adds green check after text [OK]

Hint: Content appears after element text with given styles [OK]

Common Mistakes:

• Thinking content appears before text
• Ignoring color styling on inserted content
• Expecting no visible change without HTML change

4. Identify the error in this CSS code:

div::after { content: foo; }

medium

A. content: foo; is valid and will not show anything

B. Missing semicolon after content property

C. ::after cannot be used on div elements

D. content must be a string or url, not 'foo'

Solution

1. Step 1: Check valid values for content

   The content property requires a string (in quotes), url(), or special keywords like '' (empty string). The value foo is invalid here.

2. Step 2: Verify usage of ::after on div

   The ::after pseudo-element can be used on any element, including div.

3. Final Answer:

   content must be a string or url, not 'foo' -> Option D

4. Quick Check:

   content needs string or url, not 'foo' [OK]

Hint: Use quotes for content, 'foo' is invalid [OK]

Common Mistakes:

• Using 'foo' instead of empty string or valid content
• Thinking ::after can't be on div
• Missing semicolon (not the main error here)

5. You want to add a decorative quote mark after every blockquote without changing HTML. Which CSS snippet correctly does this and ensures accessibility?

hard

A. blockquote::after { content: '"'; font-size: 2rem; color: gray; aria-hidden: true; }

B. blockquote::after { content: '"'; font-size: 2rem; color: gray; display: none; }

C. blockquote::after { content: '"'; font-size: 2rem; color: gray; }

D. blockquote::after { content: '"'; font-size: 2rem; color: gray; role: presentation; }

Solution

1. Step 1: Add decorative content with ::after

   Using content: '"' adds the quote mark after blockquote text visually.

2. Step 2: Accessibility for pseudo-elements

   Generated content from ::after is not part of the DOM accessibility tree and is ignored by screen readers, so no additional CSS properties are needed.

3. Step 3: Check other options

   blockquote::after { content: '"'; font-size: 2rem; color: gray; aria-hidden: true; } uses invalid CSS property aria-hidden (ARIA attributes belong on HTML elements). blockquote::after { content: '"'; font-size: 2rem; color: gray; display: none; } uses display: none; which hides the quote visually. blockquote::after { content: '"'; font-size: 2rem; color: gray; role: presentation; } uses invalid CSS property role.

4. Final Answer:

   blockquote::after { content: '"'; font-size: 2rem; color: gray; } -> Option C

5. Quick Check:

   ::after content ignored by screen readers [OK]

Hint: Pseudo ::after content doesn't need special accessibility handling [OK]

Common Mistakes:

• Using invalid CSS properties like aria-hidden or role
• Using invalid CSS properties like role
• Hiding content visually instead of from screen readers