Compteur et numérotation automatique en css

Il est possible depuis css 2 d'utiliser des compteurs. Ces compteurs sont en fait des variables dont les valeurs peuvent être manipulées par des règles css.

On donne ici l'exemple de la numérotation automatique des parties, sections, sous-sections, …, ou en html <h1>, <h2>, …
On définit un compteur en l'initialisant (à 0): couter-reset: counter_name.
On peut ensuite l'incrémenter: counter-increment: counter_name, et l'utiliser en affichant sa valeur: counter(counter_name).
Cette dernière commande, counter, prend en fait deux arguments: le nom du counter en premier, et en deuxième argument opionnel de style.
Les valeurs de cet argument de style sont toutes les valeur possibles pour les numérotations de listes list-style-type.
En particulier, et de manière assez courante (ce qu'on retrouve d'ailleurs aussi en Latex),

par défaut, la numérotation est décimale: 1, 2, 3, …
upper-roman et lower-roman: chiffres et nombres romains, majuscule ou minuscule, I, II, III, IV, … ou i, ii, iii, iv, …
upper-alpha et lower-alpha (ou latin): A, B, C, … ou a, b, c, …
lower-greek: α, β, γ, …

La numérotation automatique peut se faire alors en, avant chaque élément concerné (::before) incrémentation du compteur puis affichage.

Par exemple ici, la numérotation automatique suivant:

<h1>: titre, sans numéro
<h2>: sections, numérotation décimale
<h3>: sous-sections, numérotation ascii (ou alpha, a, b, c, …)

css:

body {counter-reset:section}
h2{counter-reset:subsection;
   counter-increment:section}
h2::before{content: counter(section) " - "}
h3{counter-increment:subsection;}
h3::before{content: counter(section) "." counter(subsection,lower-alpha) " - ";}
h3 {margin-left:2em}

html:

<h2> Partie 1 </h2>
<h3> Sous-partie 1 </h3>
<h3> Sous-partie 2 </h3>
<h3> Sous-partie 3 </h3>
<h2> Partie 2 </h2>
<h3> Sous-partie 1 </h3>
<h3> Sous-partie 2 </h3>
<h2> Partie 3 </h2>

Affichage/Résultat:

Partie 1

Sous-partie 1

Sous-partie 2

Sous-partie 3

Partie 2

Sous-partie 1

Sous-partie 2

Partie 3

On peut bien sûr aussi, de cette façon, numéroter automatiquement tout type d'éléments, dans des listes, ordonnées ou non (ol, ul), ou autre … Par exemple, pour compter tous les éléments de la classe "ref" (pour faire une bibliographie automatiquement ?):

css:

body{counter-reset:nref}
.ref{counter-increment:nref}
.ref:before{content: "[" counter(nref) "] "}

html:

En premier: <span class="ref">ref</span>  puis 
<span class="ref">la deuxième</span> et enfin 
une <span class="ref">troisième</span>

<div class="ref">et une dernière</div>

qui affiche:
Affichage/Résultat:

En premier: ref puis la deuxième et enfin une troisième

et une dernière