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

Challenge - 5 Problems

❓ rendering

intermediate

What will be displayed by this CSS?

Given the HTML and CSS below, what text will appear before the paragraph content in the browser?

CSS

/* HTML */
<p class="note">Remember to save your work.</p>

/* CSS */
p.note::before {
  content: "Note: ";
  color: red;
  font-weight: bold;
}

A The text 'Remember to save your work.' appears in red and bold with no prefix.

B The text 'Note: ' appears after the paragraph content.

C Only 'Remember to save your work.' appears with no changes.

D The text 'Note: ' in red and bold appears before 'Remember to save your work.'

💡 Hint

The ::before pseudo-element inserts content before the element's actual content.

The ::before pseudo-element adds content before the paragraph text. Here, it inserts the string 'Note: ' styled in red and bold before the original paragraph text.

❓ selector

intermediate

Which selector correctly applies ::before to all list items?

You want to add a dash before every list item in an unordered list. Which CSS selector correctly targets all

elements to add content before them?

A ul::before li

B ul li::before

C li::before ul

D ul li:before

💡 Hint

The ::before pseudo-element is attached directly to the element you want to style.

The selector ul li::before targets every <li> inside a <ul> and applies the ::before pseudo-element correctly. Option B uses a single colon which is outdated for pseudo-elements.

🧠 Conceptual

advanced

Why might ::before content not appear?

Consider this CSS: p::before { content: "Hello"; display: block; width: 0; height: 0; } Why might the 'Hello' text not be visible in the browser?

A Because ::before only works on block elements, and <p> is inline.

B Because content property is only for images, not text.

C Because width and height are zero, the content has no visible area to display.

D Because display: block hides the content.

💡 Hint

Think about how width and height affect visibility of elements.

The width: 0 and height: 0 make the pseudo-element have no visible size, so the text inside it is not shown. The content property works for text, and <p> is block by default.

❓ accessibility

advanced

What is an accessibility concern with ::before content?

If you add important text using ::before, what accessibility issue might arise?

A Screen readers may not read the ::before content, so important info can be missed.

B ::before content causes color contrast issues automatically.

C ::before content disables keyboard navigation on the element.

D ::before content is always read first by screen readers, causing confusion.

💡 Hint

Think about how assistive technologies read content added by CSS.

Content added with ::before is not part of the HTML and may be ignored by screen readers, so important information should not rely solely on it.

📝 Syntax

expert

What error occurs with this CSS?

What happens when you use this CSS code? h1::before { content: Hello; color: blue; }

CSS

h1::before {
  content: Hello;
  color: blue;
}

A The browser ignores the content property because Hello is not in quotes, so no text appears.

B The browser shows the word Hello before every h1 in blue.

C A syntax error stops all CSS from loading.

D The color property is ignored but content shows correctly.

💡 Hint

The content property requires text to be in quotes.

The content property must have its text value in quotes. Without quotes, the browser treats Hello as an invalid value and ignores it, so no text appears.

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