Списки и счетчики

dabblet.css

/**
 * Списки и счетчики
 */
        .multilevel,
        .multilevel ol {
            list-style-type: none;
            counter-reset: listnumber;
        }
        
        .multilevel li {
            position: relative;
            margin-left: 2em;
            counter-increment: listnumber;
        }
        
        .multilevel li:before {
            position: absolute;
            right: 100%;
            padding-right: 1ex;
            color: #555;
            content: counters(listnumber, ".") " ";
            font: italic smaller Georgia, "Times New Roman", serif;
        }
        
        .desertisland {
            list-style: none;
            counter-reset: items;
        }
        .desertisland input[type='checkbox']:checked {
            counter-increment: items;
        }
        .desertisland + p strong:before {
            content: counter(items);
        }

dabblet.html

    <ol class="multilevel">
        <li>Траляля</li>
        <li>Ололо</li>
        <li>Бубубу
            <ol>
                <li>Траляля</li>
                <li>Ололо</li>
                <li>Бубубу</li>
                <li>Мимими</li>
                <li>Трололо
                    <ol>
                        <li>Бебебе</li>
                        <li>Зузузу</li>
                        <li>Фефефе</li>
                    </ol>
                </li>
                <li>Фифифи</li>
            </ol>
        </li>
        <li>Мимими</li>
        <li>Трололо</li>
        <li>Фифифи</li>
        <li>Хахаха
            <ol>
                <li>Зузузу</li>
                <li>Фефефе
                    <ol>
                        <li>Траляля</li>
                        <li>Ололо
                            <ol>
                                <li>Бебебе</li>
                                <li>Зузузу</li>
                                <li>Фефефе</li>
                                <li>Няняня</li>
                                <li>Дудуду</li>
                            </ol>
                        </li>
                    </ol>
                </li>
                <li>Няняня</li>
                <li>Дудуду</li>
                <li>Ляляля</li>
            </ol>
        </li>
        <li>Бебебе</li>
        <li>Зузузу</li>
        <li>Фефефе</li>
        <li>Няняня</li>
        <li>Дудуду</li>
    </ol>

    <hr>
    <h2>На необитаемый остров необходимо взять</h2>
    <ul class="desertisland">
        <li><label><input type="checkbox"> Бинокль</label></li>
        <li><label><input type="checkbox"> Спички</label></li>
        <li><label><input type="checkbox"> Компас</label></li>
        <li><label><input type="checkbox"> Соль</label></li>
        <li><label><input type="checkbox"> Нож</label></li>
        <li><label><input type="checkbox"> Консервы</label></li>
        <li><label><input type="checkbox"> Книгу</label></li>
        <li><label><input type="checkbox"> Розовую кофточку</label></li>
        <li><label><input type="checkbox"> Шляпу с полями</label></li>
        <li><label><input type="checkbox"> Карандаш</label></li>
    </ul>
    <p>Выбрано <strong></strong></p>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}