Comment puis-je personnaliser les listes ordonnées dans Firefox 3 (et au-delà) ?

Personnalisation des listes ordonnées dans Firefox 3

Numéros de liste alignés à gauche

Pour aligner à gauche les numéros d'une liste ordonnée, vous pouvez utiliser CSS pour remplacer le style par défaut :

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}

li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}

li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

Modification du caractère après la liste Numéros

Pour changer le caractère après le numéro de liste, modifiez la propriété de contenu dans la règle li::before :

li::before {
  ...
  content: counter(item) "a) ";
  ...
}

Conversion en listes alphabétiques/romaines

Pour convertir des nombres en listes alphabétiques ou romaines à l'aide de CSS, utiliser une combinaison de réinitialisation de compteur, de fonction counters() et de contenu propriété :

ol {
  list-style-type: none;
  counter-reset: my-counter;
}

li {
  display: block;
  counter-increment: my-counter;
}

li::before {
  content: counters(my-counter, lower-alpha) ". ";
  ...
}

Pour les chiffres romains :

li::before {
  content: counters(my-counter, lower-roman) ". ";
  ...
}

Notez que cette technique peut ne pas fonctionner dans les anciens navigateurs, y compris Internet Explorer 7.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!