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.