First letter, first line, placeholder, selection and markers
Drag the preview narrower: the small-caps words change, because ::first-line follows the current layout.
Pseudo-elements start with two colons and style a part of an element that has no tag of its own: generated boxes before or after its content, its first letter or line, the placeholder, the selected text or a list marker.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a grey / separator between breadcrumb links in <nav class="crumbs"><a>Home</a><a>CSS</a><a>Selectors</a></nav>, but not after the last one.
Make the first letter of every .lead paragraph twice the size and dark red.
Show the URL of every link in printed-style text after it, using attr().
Explain it without notes
What is the difference between a pseudo-class and a pseudo-element? Give two of each.
Why does ::before sometimes not appear at all? List the common causes.
Is generated content accessible? What should and shouldn't go in content?
What is the specificity of p::first-line compared with p:first-child?
Preview
Console
Nothing logged yet.