After pseudo-element in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will be displayed by this CSS code?

Consider the following HTML and CSS. What text will appear after the paragraph content in the browser?

CSS

p::after { content: ' - Read more'; color: blue; }

A The paragraph text followed by ' - Read more' in blue color.

B Only ' - Read more' in blue color, no paragraph text.

C The paragraph text followed by ' - Read more' in default black color.

D The paragraph text with no extra text after it.

💡 Hint

The ::after pseudo-element adds content after the element's content.

The ::after pseudo-element inserts content after the element's content. Here, it adds the text ' - Read more' in blue color after the paragraph text.

❓ selector

intermediate

Which selector correctly targets the after pseudo-element of all list items?

You want to style the after pseudo-element of every

element. Which CSS selector should you use?

A .li::after

B li:after

C li::after

D li.after

💡 Hint

The modern syntax for pseudo-elements uses two colons (::).

The correct selector for the after pseudo-element is li::after. Using one colon :after is old syntax but still works in many browsers. Classes or other selectors like .li::after or li.after do not target the pseudo-element.

🧠 Conceptual

advanced

What happens if you use the after pseudo-element without the content property?

Given this CSS: p::after { color: red; } What will be the visible effect in the browser?

A The browser will show an error and ignore the rule.

B A red empty box will appear after the paragraph.

C The paragraph text will turn red.

D No visible content will appear after the paragraph because content is missing.

💡 Hint

The content property is required for pseudo-elements to display anything.

The content property is mandatory for ::after to show anything. Without it, the pseudo-element exists but has no visible content, so nothing appears.

❓ layout

advanced

How to make the after pseudo-element appear on a new line?

You want the text added by ::after to appear below the element's text, not inline. Which CSS rule achieves this?

CSS

p::after { content: 'Note'; /* what to add here? */ }

A display: block;

B position: absolute;

C float: right;

D visibility: visible;

💡 Hint

Changing display to block makes the element take full width and appear on a new line.

By default, ::after is inline. Setting display: block; makes it appear on its own line below the element's content.

❓ accessibility

expert

What is the accessibility concern when using the after pseudo-element to add important text?

If you add important information using ::after content, what accessibility issue might occur?

A The content will cause keyboard navigation to break.

B Screen readers may not read the content added by <code>::after</code>.

C The content will always be read twice by screen readers.

D The content will be visible only on mobile devices.

💡 Hint

Pseudo-elements content is often ignored by assistive technologies.

Content added with ::after is usually not accessible to screen readers. Important information should be in the HTML itself, not only in CSS.

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