A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>.demo { li::marker { font-weight: 700; }; }</style><main class="demo">Example content</main>
A good CSS change narrows the problem. Use pseudo-element markers only when the marker remains semantic list content. If you replace a list with decorative divs, you lose useful browser and assistive-technology behavior. This keeps the rule understandable when content, theme, or viewport conditions change later.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Styling Lists and Links | You should not make links look like plain text and then rely only on hover. Keyboard users and touch users need a persistent indication that the element is interactive. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
In production, You should not make links look like plain text and then rely only on hover. Keyboard users and touch users need a persistent indication that the element is interactive. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>ul ul { margin-block-start: .5rem; }</style><main class="demo"><ul><li>First item</li><li>Second item</li></ul></main>
Engineering judgment: Use pseudo-element markers only when the marker remains semantic list content. If you replace a list with decorative divs, you lose useful browser and assistive-technology behavior.
In production, You should not make links look like plain text and then rely only on hover. Keyboard users and touch users need a persistent indication that the element is interactive. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>.demo { a:hover { text-decoration-thickness: 2px; }; }</style><main class="demo">Example content</main>
Link states is useful here because it demonstrates styling lists and links under a concrete input rather than as an abstract property list.
<style>.demo { a:visited { color: #6d28d9; }; }</style><main class="demo">Example content</main>
Visited-safe color is useful here because it demonstrates styling lists and links under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 20 XP.