Si vous maitriser l'emploi d'un traitement de textes vous savez que l'on dispose d'une fonctionnalité très intéressante : la numérotation automatique des titres. Par exemple les titres de niveau 1 sont précédés d'un chiffre romain en majuscules (I, II, ...), les titres de niveau 2 sont précédés d'une lettre majuscule (A,B, ...) et les titres de niveau 3 d'un chiffre arabe (1,2,...).
Ou bien vous optez pour la numérotation hiérarchique décimale. Ce qui donne alors :
1-Titre de niveau 1 11-Titre de niveau 2 12 -Titre de niveau 2 2-Titre de niveau 1 21-Titre de niveau 2 22-Titre de niveau 2 221 -Titre de niveau 2 ...
Bonne nouvelle : c'est possible dans une page Web d'obtenir la numérotation automatique des titres (h1 à h6) grâce à CSS. Cette fonctionnalité peut être particulièrement utile pour la version imprimable d'une page c'est à dire dans la feuille de style pour impression.
Pour obtenir la numérotation automatique dans une page web il faut entre autres utiliser le pseudo élément ::before avec la propriété CSS content. C'est ce dont nous allons traiter dans cette page.
Dans l'exemple ci-dessous les titres commencent toujours soit par 'chapitre : 'soit par 'section :' .
Or ces textes n'ont pas été saisis à l'intérieur des balises titres (h1, h2) !
Par quel miracle le contenu des balises H1 et H2 est modifié ???
Visualisez l'exemple !