Quelle est la fonction du pseudo-element ::marker en CSS ?

Quel est le rôle du pseudo-element::marker en CSS ? Des exemples de code spécifiques sont nécessaires

Le rôle du pseudo-element::marker en CSS est de définir des styles pour la partie marque des éléments de la liste. Dans une liste HTML standard, la partie balisage fait référence à la puce, au numéro ou au style personnalisé devant l'élément de liste. En utilisant le pseudo-élément ::marker, nous pouvons personnaliser l'apparence de la partie marquée des éléments de la liste, améliorant ainsi l'effet visuel de la page Web.

Voici quelques exemples de code couramment utilisés pour démontrer l'application spécifique du pseudo-élément ::marker :

1. Style de marque de liste non ordonnée personnalisé :

ul {
  list-style-type: none;
}

li::marker {
  content: "★";
  color: red;
  font-weight: bold;
}

Dans le code ci-dessus, nous modifions d'abord la marque par défaut du non ordonné list Pour annuler le style, définissez list-style-type sur none. Ensuite, utilisez le pseudo-élément ::marker pour styliser la partie marqueur de l’élément de liste. Dans cet exemple, nous définissons le contenu de la balise sur ★, la couleur sur rouge et l'épaisseur de la police sur gras.

2. Style de marque de liste ordonnée personnalisé :

ol {
  list-style-type: none;
}

li::marker {
  content: counter(li);
  color: blue;
  font-size: 20px;
  margin-right: 10px;
}

Dans le code ci-dessus, nous annulons également le style de marque par défaut de la liste ordonnée. Ensuite, utilisez le pseudo-élément ::marker pour styliser la partie marqueur de l’élément de liste. Dans cet exemple, nous définissons le contenu du marqueur sur la valeur de comptage des éléments de la liste, en utilisant counter(li). Nous définissons également la couleur du marqueur sur bleu, la taille de la police sur 20 pixels et la marge droite de la partie marqueur sur 10 pixels.

Il convient de noter que le pseudo-élément ::marker ne peut être appliqué qu'aux éléments de liste (c'est-à-dire les éléments li) et ne peut pas être appliqué à d'autres types d'éléments, tels que les paragraphes (éléments p) ou les titres (éléments h1-h6 ), etc.

Résumé :
Le pseudo élément ::marker en CSS peut être utilisé pour personnaliser le style de la partie marque des éléments de la liste. En définissant les attributs pertinents du pseudo-élément ::marker, nous pouvons modifier le contenu, la couleur, le style de police, etc. de la marque, augmentant ainsi l'effet visuel de la page Web. L'exemple de code ci-dessus peut nous aider à mieux comprendre et utiliser le pseudo-élément ::marker.

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!