Bird
Raised Fist0
CSSmarkup~20 mins

After pseudo-element in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Styling Text with the After Pseudo-element
📖 Scenario: You are creating a simple webpage that shows a list of fruits. You want to add a small decorative text after each fruit name to make the list more interesting.
🎯 Goal: Build a webpage with a list of fruits. Use the CSS after pseudo-element to add the text " (fresh)" after each fruit name.
📋 What You'll Learn
Create an unordered list with three fruit names: Apple, Banana, Cherry
Add a CSS rule that uses the after pseudo-element on each list item
The after pseudo-element should add the text " (fresh)" after each fruit name
Use semantic HTML and ensure the CSS is valid and linked correctly
💡 Why This Matters
🌍 Real World
Adding small decorative or informative text after elements is common in web design to improve user experience and visual appeal.
💼 Career
Understanding and using CSS pseudo-elements like after is essential for front-end developers to create polished and accessible web interfaces.
Progress0 / 4 steps
1
Create the HTML list of fruits
Create an unordered list with the id attribute set to fruits. Inside it, add three list items with the exact text: Apple, Banana, and Cherry.
CSS
Hint

Use the <ul> tag with id="fruits" and add three <li> items inside.

2
Add a CSS selector for the fruit list items
Create a CSS rule that selects all li elements inside the element with id="fruits". Use the selector #fruits li.
CSS
Hint

Write a CSS rule starting with #fruits li to target all list items inside the fruits list.

3
Use the after pseudo-element to add text
Inside the CSS rule for #fruits li, add a rule for the after pseudo-element. Use content: " (fresh)"; to add the text after each fruit name.
CSS
Hint

Use #fruits li::after and set content: " (fresh)"; inside the curly braces.

4
Complete the HTML document with CSS
Wrap the existing HTML in a complete HTML5 document structure. Add a <style> block inside the <head> containing the CSS rule #fruits li::after { content: " (fresh)"; }. Include lang="en" in the <html> tag and add the required <meta> tags for charset and viewport.
CSS
Hint

Make sure to include the <!DOCTYPE html>, <html lang="en">, <head> with meta tags, and the <style> block with your CSS.

Practice

(1/5)
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