Les compteurs CSS peuvent-ils personnaliser les listes ordonnées alpha inférieures du HTML pour utiliser les parenthèses droites ?

Utilisation de parenthèses droites dans les listes ordonnées alpha inférieures (HTML)

De nombreux sites Web utilisent des listes ordonnées pour présenter le contenu de manière structurée et séquentielle . Par défaut, ces listes utilisent des points ("".") pour désigner chaque élément de la liste. Cependant, il peut y avoir des cas où vous préférez un marqueur différent, comme les parenthèses droites ("a)", "b)", etc.).

Question : Est-il possible de personnalisez le style de liste alphabétique inférieure en HTML pour utiliser des parenthèses droites au lieu de des points ?

Réponse :

Étonnamment, oui, il existe un moyen intelligent d'obtenir cet effet en utilisant des compteurs CSS. Les compteurs nous permettent de définir une numérotation automatique pour des éléments tels que des titres ou des éléments de liste. En modifiant cette fonctionnalité, nous pouvons créer un style de liste personnalisé avec des parenthèses.

Voici un extrait de code qui montre comment procéder :

<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

ol {
  counter-reset: list;
}

ol > li {
  list-style: none;
}

ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

1. Réinitialiser le Compteur : La propriété counter-reset initialise un compteur nommé "liste" pour les objets commandés list.
2. Supprimer le style par défaut : Nous définissons list-style : none sur les éléments de la liste pour supprimer les marqueurs de points par défaut.
3. Créer des marqueurs personnalisés : À l'intérieur du pseudo-élément li:before, nous utilisons la propriété content pour générer les marqueurs personnalisés. Ici, counter(list, lower-alpha) fournit le caractère alphabétique minuscule (a, b, c, etc.), et nous ajoutons une parenthèse droite en utilisant ") ".
4. Incrémentez le compteur : contre-incrément : list incrémente le compteur "list" de un pour chaque liste élément.

Remarque : Vous devrez peut-être ajuster le remplissage et l'espacement dans votre CSS pour aligner correctement les parenthèses dans les éléments de la liste.

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!