Add content before — practice exercise

What you'll be asked to do

1. 1.Add content beforeexercise · easy · 10 min

   Add a ::before marker to .text and colour the paragraph red.

   Passes when: Add a ::before marker to .text and colour the paragraph red.

2. 2.Give the pseudo-element a colourexercise · easy · 10 min · practice plan

   Colour .text green so its ::before inherits it.

   Passes when: Colour .text green so its ::before inherits it.

3. 3.Add content afterexercise · easy · 10 min · practice plan

   Append a marker after .text and colour the element blue.

   Passes when: Append a marker after .text and colour the element blue.

4. 4.Use an empty content valueexercise · easy · 10 min · practice plan

   Create a decorative box with empty content and a red parent.

   Passes when: Create a decorative box with empty content and a red parent.

5. 5.Style the first lineexercise · medium · 10 min · practice plan

   Use ::first-line and colour the paragraph green.

   Passes when: Use ::first-line and colour the paragraph green.

6. 6.Fix the missing contentbug fix · easy · 8 min

   Without content the pseudo-element never renders — colour the element green.

   Passes when: Without content the pseudo-element never renders — colour the element green.

7. 7.Fix the misspelled pseudo-elementbug fix · easy · 8 min · practice plan

   It is ::before, not ::bofore — and the paragraph should be blue.

   Passes when: It is ::before, not ::bofore — and the paragraph should be blue.

8. 8.Fix the wrong element targetedbug fix · easy · 8 min · practice plan

   The rule styles the span but the paragraph was intended.

   Passes when: The rule styles the span but the paragraph was intended.

9. 9.Fix after used instead of beforebug fix · easy · 8 min · practice plan

   The marker should trail the text and the element must be blue.

   Passes when: The marker should trail the text and the element must be blue.

10. 10.Fix the unquoted contentbug fix · easy · 8 min · practice plan

    A content string must be quoted.

    Passes when: A content string must be quoted.

Between them these tasks cover ::before and ::after, content property and ::first-line.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.