Separate lists numeration

by AntowaKartowa

HTML

<div class="lists">
    <h1>Heading 1</h1>
    <ol class="list">
        <li class="list-item">List item 01</li>
        <li class="list-item">List item 02</li>
        <li class="list-item">List item 03</li>
        <li class="list-item">List item 04</li>
        <li class="list-item">List item 05</li>
    </ol>
    <h1>Heading 2</h1>
    <ol class="list">
        <li class="list-item">List item 01</li>
        <li class="list-item">List item 02</li>
        <li class="list-item">List item 03</li>
        <li class="list-item">List item 04</li>
        <li class="list-item">List item 05</li>
    </ol>
    <h1>Heading 3</h1>
    <ol class="list">
        <li class="list-item">List item 01</li>
        <li class="list-item">List item 02</li>
        <li class="list-item">List item 03</li>
        <li class="list-item">List item 04</li>
        <li class="list-item">List item 05</li>
    </ol>
    <h1>Heading 4</h1>
    <ol class="list">
        <li class="list-item">List item 01</li>
        <li class="list-item">List item 02</li>
        <li class="list-item">List item 03</li>
        <li class="list-item">List item 04</li>
        <li class="list-item">List item 05</li>
    </ol>
    <h1>Heading 5</h1>
    <ol class="list">
        <li class="list-item">List item 01</li>
        <li class="list-item">List item 02</li>
        <li class="list-item">List item 03</li>
        <li class="list-item">List item 04</li>
        <li class="list-item">List item 05</li>
    </ol>
</div>

CSS

.lists {
     counter-reset: list;   
}

.list-item {
    list-style: none;
    padding-left: 0;
}

.list-item:before {
    counter-increment: list;
    content: counter(list) '. ';
}