After pseudo-element in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

CSS

p::after { content: [1]; }

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

Ablock

Bnone

C"!"

Dafter

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to put quotes around the content value.

Using invalid values like 'none' or 'block' for content.

The content property inside the ::after pseudo-element must be a string, so "!" adds an exclamation mark after the paragraph.

2fill in blank

medium

Complete the code to make the after content display as a block element.

CSS

p::after { content: "!"; display: [1]; }

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

Ainline

Bblock

Cnone

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'inline' which is the default and won't change layout.

Using 'none' which hides the content.

Setting display to block makes the after content appear on its own line below the paragraph.

3fill in blank

hard

Fix the error in the code to correctly add a red asterisk after labels.

CSS

label::after { content: [1]; color: red; }

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

A'*'

B*

Cstar

D"*"

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the asterisk unquoted causing syntax errors.

Using words like 'star' which are not valid content values.

The content property requires a string in quotes. "*" correctly adds a red asterisk after labels.

4fill in blank

hard

Fill both blanks to add a blue dash after headings and make it inline-block.

CSS

h2::after { content: [1]; display: [2]; color: blue; }

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

A"-"

Binline

Cinline-block

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using display 'inline' which limits styling options.

Forgetting quotes around the dash.

The content is a dash "-" and display is inline-block to allow styling and spacing after the heading.

5fill in blank

hard

Fill all three blanks to add a green checkmark after list items, make it inline, and add margin-left.

CSS

li::after { content: [1]; display: [2]; margin-left: [3]; color: green; }

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

A"✔"

Binline

C0.5rem

Dblock

Attempts:

3 left

💡 Hint

Common Mistakes

Using display block which moves the checkmark to a new line.

Not adding margin-left so the checkmark is too close to text.

The content is a checkmark "✔", display is inline so it flows with text, and margin-left adds space after the list item.