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.
Add a ::before marker to .text and colour the paragraph red.
Colour .text green so its ::before inherits it.
Append a marker after .text and colour the element blue.
Create a decorative box with empty content and a red parent.
Use ::first-line and colour the paragraph green.
Without content the pseudo-element never renders — colour the element green.
It is ::before, not ::bofore — and the paragraph should be blue.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThe rule styles the span but the paragraph was intended.
The marker should trail the text and the element must be blue.
A content string must be quoted.