Puces personnalisées avec CSS :: bookmark

Aujourd'hui, nous sommes ravis de parler de la :: marqueur pseudo-élément, qui vous donne la possibilité de concevoir l'élément de puce que les navigateurs créent pour vous.

Créer un signet

Les :: marqueur La zone de marqueur de pseudo-élément est automatiquement générée dans chaque élément de l'élément de liste, avant le contenu réel et le :: avant que pseudo-élément.

li::before {
contenu: "::before";
Contexte: lightgray;
rayon de la frontière: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}

En règle générale, les éléments de la liste sont

<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>

dd {
  affichage: list-item;
  type de liste: "🤯";
  padding-inline-start: 1ch;
}

Peigner un marqueur

Jusqu'à ce que :: marqueur, les listes peuvent être conçues en utilisant type de liste y image-style-liste Pour changer le symbole de l'élément de liste avec 1 ligne de CSS:

li {
image-style-liste: URL(/right-arrow.svg);
type de liste: '👉';
padding-inline-start: 1ch;
}

C'est utile, mais nous avons besoin de plus. Que diriez-vous de changer la couleur, la taille, l'espacement, etc.? C'est là où :: marqueur vient à la rescousse. Permet un ciblage individuel et global de ces pseudo-éléments CSS:

li::marker {
Couleur: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}

Les type de liste La propriété offre des possibilités de style très limitées. Les :: marqueur pseudo élément signifie que vous pouvez pointer vers le marqueur lui-même et le styliser directement. Cela permet plus de contrôle.

Cela étant dit, vous ne pouvez pas utiliser toutes les propriétés CSS dans un :: marqueur. La liste des propriétés autorisées et non autorisées est clairement indiquée dans la spécification. Si vous essayez quelque chose de cool avec ce pseudo-élément et que cela ne fonctionne pas, la liste ci-dessous est votre guide sur ce qui peut et ne peut pas être fait avec CSS:

CSS autorisé :: marqueur Propriétés

• animation- *
• transition- *
• Couleur
• direction
• Police de caractère- *
• contenu
• unicode-bidi
• espace blanc

Changer le contenu d'un :: marqueur C'est fait avec contenu l'opposé de type de liste. Dans l'exemple suivant, le style du premier élément est utilisé type de liste et le second avec :: marqueur. Les propriétés dans le premier cas s'appliquent à l'ensemble de l'élément de la liste, pas seulement au marqueur, ce qui signifie que le texte est animé comme le marqueur. Lorsque vous utilisez :: marqueur nous ne pouvons pointer que sur la zone de marqueur et non sur le texte.

Notez également comment les Contexte la propriété n'a aucun effet.

li:nth-child(1) {
type de liste: '?';
font-size: 2rem;
Contexte: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

li:nth-child(2)::marker {
contenu: '!';
font-size: 2rem;
Contexte: hsl(200 20% 88%);
animation: color-change 3s ease-in-out infinite;
}

Modifier le contenu d'un signet

Voici quelques-unes des façons dont vous pouvez concevoir vos signets.

Modifier tous les éléments de la liste

li {
type de liste: "😍";
}
li::marker {
contenu: "😍";
}

Modifier un seul élément de la liste

li:last-child::marker {
contenu: "😍";
}

Changer un élément de liste en SVG

li::marker {
contenu: URL(/heart.svg);
contenu: URL(#heart);
contenu: URL("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}

Modification des listes numérotées
Que diriez-vous d'un

même si? Le marqueur dans un élément de liste ordonnée est un nombre et non une puce par défaut. En CSS, ils sont appelés Comptableset ils sont assez puissants. Ils ont même des propriétés pour définir et réinitialiser le début et la fin du nombre, ou les changer en chiffres romains. Pouvons-nous concevoir cela? Oui, et nous pouvons même utiliser la valeur du contenu du signet pour créer notre propre présentation de numérotation.

li::marker {
contenu: counter(list-item) "› "; 
Couleur: hotpink;
}

Dépuration

Chrome DevTools est prêt à vous aider à inspecter, déboguer et modifier les styles appliqués à :: marqueur pseudo éléments.




Style futur des pseudo-éléments

Vous pouvez obtenir plus d'informations sur :: marker à l'adresse:

C'est formidable d'avoir accès à quelque chose qui a été difficile à concevoir. Vous souhaiterez peut-être être en mesure de concevoir d'autres éléments générés automatiquement. Vous pourriez être frustré par

ou l'indicateur de saisie semi-automatique de l'entrée de recherche, les choses qui ne sont pas implémentées de la même manière dans tous les navigateurs. Une façon de partager ce dont vous avez besoin est de créer un souhait https://webwewant.fyi.