Before pseudo-element in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add content before a paragraph using the before pseudo-element.

CSS

p::[1] {
  content: "Note: ";
}

Drag options to blanks, or click blank then click option'

Aafter

Bfirst-line

Cbefore

Dfirst-letter

Attempts:

3 left

💡 Hint

Common Mistakes

Using ::after instead of ::before

Forgetting the double colon (::) syntax

Using ::first-letter or ::first-line which do not insert content

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

2fill in blank

medium

Complete the code to add a red star before every list item using the before pseudo-element.

CSS

li::[1] {
  content: "★ ";
  color: red;
}

Drag options to blanks, or click blank then click option'

Abefore

Bselection

Cmarker

Dafter

Attempts:

3 left

💡 Hint

Common Mistakes

Using ::after which adds content after the element

Using ::marker which styles the bullet but does not add custom content

Using single colon syntax which is outdated

The ::before pseudo-element adds content before each list item, here a red star.

3fill in blank

hard

Fix the error in the code to correctly add text before a heading using the before pseudo-element.

CSS

h2[1] {
  content: "Chapter 1: ";
  font-weight: bold;
}

Drag options to blanks, or click blank then click option'

A::before

Bbefore

Cafter

Dbefore::

Attempts:

3 left

💡 Hint

Common Mistakes

Using single colon instead of double colon

Placing colons after the pseudo-element name

Using ::after instead of ::before

The correct syntax for pseudo-elements uses double colons before the name, like ::before.

4fill in blank

hard

Fill both blanks to create a before pseudo-element that adds a green checkmark before each list item.

CSS

li::[1] {
  content: "[2] ";
  color: green;
}

Drag options to blanks, or click blank then click option'

Abefore

Bafter

C✔

D✘

Attempts:

3 left

💡 Hint

Common Mistakes

Using ::after instead of ::before

Using the wrong symbol for the checkmark

Forgetting to add a space after the symbol

Use ::before to add content before elements. The green checkmark is "✔".

5fill in blank

hard

Fill all three blanks to add a blue arrow before each link with the before pseudo-element and make it bold.

CSS

a::[1] {
  content: "[2]";
  color: [3];
  font-weight: bold;
}

Drag options to blanks, or click blank then click option'

Abefore

B→

Cblue

Dafter

Attempts:

3 left

💡 Hint

Common Mistakes

Using ::after instead of ::before

Using the wrong arrow symbol

Forgetting to set the color property

Use ::before to add content before links. The arrow symbol is "→" and color is blue.

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