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

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
  

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
  

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
  

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.

Practice

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

easy

A. It changes the background color of an element.

B. It inserts content before the element's main content without changing HTML.

C. It removes the element from the page.

D. It adds content after the element's main content.

Solution

1. Step 1: Understand the role of ::before

   The ::before pseudo-element inserts content before the main content of an element without modifying the HTML structure.

2. Step 2: Compare with other options

   Options B, C, and D describe different CSS behaviors unrelated to ::before. It adds content after the element's main content. describes ::after, not ::before.

3. Final Answer:

   It inserts content before the element's main content without changing HTML. -> Option B

4. Quick Check:

   ::before adds content before = A [OK]

Hint: Remember ::before adds content before element text [OK]

Common Mistakes:

• Confusing ::before with ::after
• Thinking it changes HTML structure
• Assuming it styles background only

2. Which CSS property is required to display content with ::before?

easy

A. display

B. visibility

C. position

D. content

Solution

1. Step 1: Identify the key property for ::before

   The content property is mandatory to show anything with ::before. Without it, no content appears.

2. Step 2: Check other properties

   Properties like display, position, and visibility affect layout or visibility but do not create content.

3. Final Answer:

   content -> Option D

4. Quick Check:

   content property shows ::before content = B [OK]

Hint: Use content property to show ::before content [OK]

Common Mistakes:

• Forgetting to add content property
• Using display instead of content
• Assuming position creates content

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

p::before { content: "Hello "; }

<p>Given HTML: <p>World</p>

medium

A. Hello World

B. World Hello

C. Hello

D. World

Solution

1. Step 1: Understand ::before content insertion

   The ::before adds "Hello " before the paragraph's original text "World".

2. Step 2: Combine the inserted and original text

   The final visible text is "Hello World" because the pseudo-element content appears before the original content.

3. Final Answer:

   Hello World -> Option A

4. Quick Check:

   Inserted content before text = D [OK]

Hint: ::before content appears before element text [OK]

Common Mistakes:

• Ignoring the original text
• Thinking content replaces text
• Confusing order of content

4. Identify the error in this CSS code:

h1::before { content; "Note: "; color: red; }

medium

A. Color property cannot be used with ::before

B. Wrong pseudo-element syntax

C. Missing colon after content property

D. content value must be numeric

Solution

1. Step 1: Check syntax of content property

   The code uses content; "Note: " which is incorrect. It should be content: "Note: " with a colon.

2. Step 2: Verify other parts

   The pseudo-element syntax h1::before is correct, color can be used, and content can be any string, so other options are wrong.

3. Final Answer:

   Missing colon after content property -> Option C

4. Quick Check:

   Property syntax needs colon = C [OK]

Hint: Use colon after property names in CSS [OK]

Common Mistakes:

• Using semicolon instead of colon after property
• Miswriting pseudo-element syntax
• Thinking color can't style ::before

5. How can you use ::before to add a red asterisk (*) before all required form labels for accessibility?

hard

A. label.required::before { content: "*"; color: red; }

B. label::before { content: "*"; color: red; }

C. label.required { content: "*"; color: red; }

D. label.required::after { content: "*"; color: red; }

Solution

1. Step 1: Target only required labels

   Use the selector label.required::before to add content only before labels with class "required".

2. Step 2: Add red asterisk before label text

   Set content: "*" and color: red to show a red star before the label text for accessibility.

3. Final Answer:

   label.required::before { content: "*"; color: red; } -> Option A

4. Quick Check:

   Use ::before with content and color on required labels = A [OK]

Hint: Use class selector with ::before and content '*' [OK]

Common Mistakes:

• Using ::after instead of ::before
• Adding content to label without ::before
• Applying content property directly on label without pseudo-element