CSSmarkup~20 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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

Need a hint?

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

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


  Apple
  Banana
  Cherry


/* Add CSS selector for #fruits li here */

Need a hint?

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

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


  Apple
  Banana
  Cherry


#fruits li {
  /* Add after pseudo-element with content here */
}

Need a hint?

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

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

Need a hint?

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