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

Styling Text with the Before Pseudo-element

📖 Scenario: You are creating a simple webpage that shows a list of favorite fruits. You want to add a small decorative symbol before each fruit name to make the list look nicer.

🎯 Goal: Build a webpage with a list of fruits where each fruit name has a star symbol added before it using the CSS ::before pseudo-element.

📋 What You'll Learn

Create an unordered list with three fruit names: Apple, Banana, Cherry

Add a CSS rule that uses the ::before pseudo-element to insert a star symbol (★) before each fruit name

Style the star symbol with a color of gold and some spacing to the right

Ensure the page uses semantic HTML and the CSS is properly linked or embedded

Make sure the star symbol is accessible and does not interfere with screen readers

💡 Why This Matters

🌍 Real World

Decorative symbols before text are common in menus, lists, and navigation to improve visual appeal and user experience.

💼 Career

Knowing how to use CSS pseudo-elements like ::before is essential for front-end developers to create stylish and accessible web pages.

1

Create the HTML list of fruits

Create an unordered list with the id fruit-list containing three list items with the exact text: Apple, Banana, and Cherry.

CSS

Need a hint?

Use the <ul> tag with id="fruit-list" and add three <li> items with the fruit names.

2

Add a CSS selector for the fruit list items

Add a CSS rule that selects all li elements inside the #fruit-list by writing the selector #fruit-list li.

CSS

  
  
  Fruit List
  
    #fruit-list li {
      /* Your code here */
    }
  


  
    Apple
    Banana
    Cherry
  

Need a hint?

Write a CSS selector that targets all li inside the element with id="fruit-list".

3

Use the ::before pseudo-element to add a star symbol

Inside the CSS rule for #fruit-list li, add a ::before pseudo-element that inserts the content "★" before each fruit name. Also set the color to gold and add a right margin of 0.5rem.

CSS

  
  
  Fruit List
  
    #fruit-list li::before {
      /* Your code here */
    }
  


  
    Apple
    Banana
    Cherry
  

Need a hint?

Use content: "\2605"; to add a star symbol. Then style it with color and margin-right.

4

Ensure accessibility and final touches

Add aria-hidden="true" to the ::before pseudo-element by adding aria-hidden: true; in the CSS to hide the star from screen readers. Also, add font-weight: bold; to make the star stand out.

CSS

  
  
  Fruit List
  
    #fruit-list li::before {
      content: "\2605";
      color: gold;
      margin-right: 0.5rem;
      /* Your code here */
    }
  


  
    Apple
    Banana
    Cherry
  

Need a hint?

Add font-weight: bold; inside the #fruit-list li::before CSS rule. Note: aria-hidden is not a valid CSS property and cannot be added in CSS.