Counter-increment a counter-reset

s použitím display: list-item a list-style-type: decimal.

Zdroj vypadá takto

<style>
h4 {display: list-item; list-style-type: decimal; counter-increment: hactyrky; margin-left: 3em;}
div {counter-reset: hactyrky 0;}
</style>


<h4>První há čtyřka</h4>
<p>Cokoli mezi tím</p>
<h4>Druhá há čtyřka</h4>
<h4>Třetí há čtyřka</h4>
<div>
    <h4>resetovaná há čtyřka</h4>
    <h4>další há čtyřka</h4>
</div>

A zobrazí se takto:

První há čtyřka

Cokoli mezi tím

Druhá há čtyřka

Třetí há čtyřka

Příklad se vztahuje k popisu vlastnosti counter-increment