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.