Comment compter les liens d'une page avec CSS ?

Un titre un peu étrange, mais oui, on peut faire des choses plutôt sympa avec seulement quelques lignes de CSS !

Admettons par exemple que vous souhaitiez connaître le nombre de liens sortants d'une page et afficher leur position dans la page.

Avec les CSS counters, c'est possible.

Il suffit :

• de créer une variable avec la propriété counter-reset (sa valeur sera automatiquement de 0) au niveau où vous souhaitez commencer le comptage, par exemple body
• de l'incrémenter à chaque lien trouvé dans le DOM avec la propriété counter-increment
• d'afficher le résultat avec le combo ::after + content , la fonction counter() et quelques propriétés pour modifier l'affichage

Ce qui donne par exemple :

body {
  counter-reset: link;
}

a::after {
  content: " " counter(link);
  color: red;
  font-weight: bold;
  counter-increment: link;
}

Et voilà le résultat !