Demo 1: Todo List (CSS Toggles)

How

Set a toggle pointing to self on each item.

Code

HTML 
<ul class="todo">
    <li>write an explainer</li>
    <li>draft a specification</li>
    <li>create a polyfill</li>
    <li>make a demo page</li>
</ul>
CSS 
.todo li {
    toggle: todo self;
    list-style-type: '❌ ';
}

.todo li:toggle(todo) {
    list-style-type: '✅ ';
}

Demo (by Oddbird)

ℹ Your browser does not support CSS Toggles. To cater for this a polyfill has been loaded.