Skip to main content

CSS Pseudo Elements — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Pseudo Elements lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Add content before

    easy10 min

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

  2. 2

    Give the pseudo-element a colour

    easy10 min

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

  3. 3

    Add content after

    easy10 min

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

  4. 4

    Use an empty content value

    easy10 min

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

  5. 5

    Style the first line

    medium10 min

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

Find the bug(5)

  1. 1

    Fix the missing content

    easy8 min

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

  2. 2

    Fix the misspelled pseudo-element

    easy8 min

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

  3. 3

    Fix the wrong element targeted

    easy8 min

    The rule styles the span but the paragraph was intended.

  4. 4

    Fix after used instead of before

    easy8 min

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

  5. 5

    Fix the unquoted content

    easy8 min

    A content string must be quoted.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace