Comment puis-je personnaliser les listes ordonnées dans Firefox 3 à l'aide de CSS ?

Personnalisation des listes ordonnées dans Firefox 3

Numéros de liste alignés à gauche :

À gauche -alignez les nombres dans une liste ordonnée, utilisez le code suivant :

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

Ceci le code crée un pseudo-élément avant chaque élément de la liste qui affiche le numéro suivi d'une parenthèse fermante. Le nombre est aligné à gauche sur une largeur fixe de 2em et la propriété margin-left garantit qu'il est en retrait par rapport à l'élément de la liste.

Modification du caractère numérique :

Pour changer le caractère après le numéro dans une liste ordonnée, modifiez la valeur de la propriété content dans la déclaration li::before. Par exemple, pour utiliser un point au lieu d'une parenthèse, utilisez ce qui suit :

content: counter(item) ".";

Solution CSS pour les listes alphabétiques/romaines :

Pour convertir une liste ordonnée des nombres aux caractères alphabétiques ou romains sans utiliser l'attribut type, utilisez le type de réinitialisation du compteur, le contre-incrément et le type de style de liste propriétés :

ol {
  counter-reset: item;
}
li {
  counter-increment: item;
  list-style-type: none;
}
li::before {
  display: inline-block;
  content: counters(item, ".") " ";
}

Ce code réinitialise le compteur d'éléments pour qu'il démarre à partir de 1, l'incrémente pour chaque élément de la liste et masque les nombres par défaut à l'aide de list-style-type : aucun. La propriété content crée ensuite un pseudo-élément qui affiche le caractère alphabétique ou romain suivi d'un point.

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!