::marker - Sélecteur CSS

Description du pseudo-élément ::marker.

Le pseudo élément ::marker est un sélecteur qui cible les puces ou les numéros dans une liste (balises li). Seuls les puces ou les numéros sont concernés : ce sélecteur ne désigne pas le texte qui suit.

::marker cible également les petits triangles dans un élément details. Ces composants servent à révéler leur contenu à la demande de l'utilisateur. Le texte complet du composant details s'affiche en cliquant sur ce triangle.

Les seules propriétés utilisables avec le sélecteur ::marker sont les suivantes :

• La propriété color.
• La propriété content.
• Les propriétés de polices de caractères (leur nom commence par font-...).
• La propriété white-space.
• Les propriétés text-combine-upright, unicode-bidi et direction.
• Les propriétés d'animation et de transition.

Exemples d'utilisation du pseudo-élément ::marker.

Application de ::marker à des listes à puces ou à numéros.

Les exemples ci-dessous montrent trois utilisations de ::marker :
    - Formatage de numéros.
    - Utilisation d'une image.
    - Utilisation d'un texte.

Application de ::marker à un composant details.

Remarque : le pseudo-élément ::marker permet de changer l'aspect du triangle en le remplaçant par un autre caractère, mais alors on perd la faculté de se retourner automatiquement au clic de la souris. Il faut donc gérer cela soi-même. C'est le cas dans l'exemple ci-dessous où la pseudo-classe :open a été utilisé pour détecter si le composant est ouvert, et appliqué un autre caractère.

Les animations appliquées à ::marker.

Les animations et transitions sont applicables au pseudo-éléments ::marker, mais cela ne fonctionne pas sur tous les navigateurs.

• Lundi
• Mardi
• Mercredi
• Jeudi
• Vendredi
• Samedi
• Dimanche

Compatibilité des navigateurs avec le pseudo-élément ::marker.

Le pseudo élément ::marker est relativement bien traité par les navigateurs, mais son imbrication avec ::before ou ::after est plus délicate. Reportez vous au tableau de compatibilité ci-dessous.

Remarques :

(1) Le support de Safari est limité à la couleur ou à la taille des polices.

1

Pseudo-élément
::marker

2

Animations sur
::marker

3

Imbrication avec
::before et ::after

Estimation de la prise en charge globale.

81%

96%

73%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Firefox pour Androïd

Chrome

Edge

Safari

1

Opéra

Safari sur IOS

1

Androïd Brower

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Historique du pseudo-élément ::marker.

• Module CSS - Pseudo-éléments - Niveau 4

  Concernant ::marker Introduction du pseudo-élément ::marker.
  

  15 Janvier 2015

  Document de travail.

  

  

  

Voir aussi (autres pseudo-éléments).

De nombreux pseudo-éléments existent en CSS. Ils sont regroupés dans la spécification module CSS - Pseudo-éléments. En voici quelques uns, qui ciblent une partie de la page, ou une partie d'un élément.