Listes

Content et gestion de compteurs

content

Cette propriété est utilisée en conjonction avec les pseudo-éléments :before et :after pour générer un contenu dans un document. Les valeurs possibles sont, notamment :

• une chaîne de texte quelconque, encadrée par deux guillemets droits ;
• l'URL d'une image (bouton d'aide à la saisie de l'URL) ;
• le nom et le style d'un compteur 'counter(nom, [style])' (bouton d'aide à la saisie du compteur) ;
• une combinaison de ces éléments.

Exemples de puces avec la propriété content CSS :

li {list-style-type: none;}
li:before { content: "- "; } ➥ affiche la chaîne de caractères "- " ;
li:before { content:"☞ "counter(monCompteur);); } ➥ affiche un compteur précédé du signe ☞ ;
li:before { padding-top:0; padding-right:20px; padding-bottom:6px; padding-left:20px; content:counter(monCompteur) url("../images/puce.png"); } ➥ affiche un compteur et une image de puce, ajustée au moyen du padding.

counter-reset

La propriété 'counter-reset' contient une liste de noms de compteurs, un ou plusieurs, chacun d'eux étant suivi d'un entier facultatif. Cet entier indique la valeur que prend un compteur à chaque fois que survient l'élément. Par défaut, celui-ci a une valeur nulle.

Exemple de reset :

ol {counter-reset: monCompteur;} ➥ initialise et nomme le compteur monCompteur

counter-increment

La propriété 'counter-increment' accepte un ou plusieurs noms de compteurs (des identifiants), chacun d'eux étant suivi d'un entier facultatif. Cet entier indique la valeur de l'incrémentation du compteur à chaque fois que survient l'élément. L'incrémentation par défaut est d'une unité. Les entiers nuls ou négatifs sont admis.

Exemple de numérotation automatique des titres sur 3 niveaux

<style type="text/css">
body {counter-reset:cH1;} /* compteur titre 1 à zéro */
h1 {counter-increment:cH1; counter-reset:cH2;} /* incrémente H1 et compteur titre 2 à zéro */
h2 {counter-increment:cH2; counter-reset:cH3;} /* incrémente H2 et compteur titre 3 à zéro */
h3 {counter-increment:cH3;} /* incrémente H3 */
h1:before {content:counter(cH1) " "; }
h2:before {content:counter(cH1) "." counter(cH2) " "; } /* compteurs séparés par un point */
h3:before {content:counter(cH1) "." counter(cH2) "." counter(cH3) " "; }
</style>