L1 Info : Informatique et Document, CSS
 
◃  Ch. 6 CSS avancé  ▹
 

Les pseudo-éléments :before et :after

  • :before et :after : pseudo-éléments qui autorisent la génération automatique de texte ou de numéros avant ou après le contenu d'un élément.
  • Associés à 4 propriétés spécifiques :
    • content définit le contenu généré dans le pseudo-élément
      • format : counter-reset : [<counter-name> <integer>?]+
    • counter-set déclare et initialise au moins une variable d'incrémentation (à 1 par défaut)
    • counter-reset réinitialise (et déclare si nécessaire) au moins une variable d'incrémentation (à 1 par défaut)
      • format : counter-reset : [<counter-name> <integer>?]+
    • counter-increment incrémente au moins une variable
  • Possibilité d'utiliser des fonctions dédiées :
    • counter(counter-id[, counter-style]?) retourne une chaîne associé à la valeur courante de la variable counter-id
    • counters(counter-id, séparateur, [, counter-style]?) même principe pour un compteur hiérarchique
  • Pour en savoir plus : Using CSS counters
  • Exemple 1 : numérotation automatique de titre et gestion de préfixes (résultat): 
    body
{
  color : #6060C0;
  background-color : #EFEFFF;
  font-family : arial, helvetica, sans-serif;
  counter-reset : chap; /* initialisation de la variable chap */
}

h2:before {
  content : "Chapitre " counter(chap) ". "; /* création du contenu par concaténation */
  counter-increment : chap; /* incrémentation de la variable chap */
  color : red;
 }

h2 {
  counter-reset : section 100; /* initialisation de la variable section */
}

h3:before {
  content : "Section "  counter(chap) "." counter(section) ". ";
  counter-increment : section;  /* incrémentation de la variable section à 100 */
  color : green;
 }

h3 {
  counter-reset : ssection; /* initialisation de la variable ssection */
 }

h4:before {
  content : counter(chap) "." counter(section) "." counter(ssection,armenian) ". " ;
  counter-increment : ssection;  /* incrémentation de la variable ssection */
  color : orange;
 }
  • Exemple 2 : numérotation hiérarchique (résultat): 
    ol {
 counter-reset : numitem;
 }

li {
    counter-increment: numitem;
    display : block; /* nécessaire avec firefox ?? */
}

li:before {
 content : counters(numitem,'.') ' ';
 }