Pseudo-élément CSS `::highlight()`

Baseline 2026

Nouvellement disponible

Depuis March 2026, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

Le pseudo-élément CSS ::highlight() applique des styles à une mise en évidence personnalisée.

Une mise en évidence personnalisée est une collection d'objets AbstractRange et est enregistrée sur une page Web à l'aide de HighlightRegistry.

Le pseudo-élément ::highlight() suit un modèle d'héritage spécial commun à tous les pseudo-éléments de mise en évidence. Pour plus de détails sur le fonctionnement de cet héritage, consultez la section Héritage des pseudo-éléments mise en évidence.

Propriétés autorisées

Seules certaines propriétés CSS peuvent être utilisées avec ::highlight() :

color
background-color
text-decoration et ses propriétés associées
text-shadow
-webkit-text-stroke-color, -webkit-text-fill-color et -webkit-text-stroke-width

En particulier, background-image est ignoré.

Syntaxe

css

::highlight(nom-de-mise-en-evidence-personnalisee)

Exemples

Mettre en évidence des caractères

HTML

html

<p id="rainbow-text">
  API CSS personnalisée pour la mise en évidence arc-en-ciel
</p>

CSS

css

#rainbow-text {
  font-family: monospace;
  font-size: 1.5rem;
}

::highlight(rainbow-color-1) {
  color: violet;
  text-decoration: underline;
}
::highlight(rainbow-color-2) {
  color: purple;
  text-decoration: underline;
}
::highlight(rainbow-color-3) {
  color: blue;
  text-decoration: underline;
}
::highlight(rainbow-color-4) {
  color: green;
  text-decoration: underline;
}
::highlight(rainbow-color-5) {
  color: yellow;
  text-decoration: underline;
}
::highlight(rainbow-color-6) {
  color: orange;
  text-decoration: underline;
}
::highlight(rainbow-color-7) {
  color: red;
  text-decoration: underline;
}

JavaScript

const textNode = document.getElementById("rainbow-text").firstChild;

if (!CSS.highlights) {
  textNode.textContent =
    "L'API CSS Custom Highlight n'est pas prise en charge dans ce" +
    "navigateur&nbsp;!";
}

// Créez et enregistrez des surlignages pour chaque couleur de l'arc-en-ciel.
const highlights = [];
for (let i = 0; i < 7; i++) {
  // Créez un nouveau surlignage pour cette couleur.
  const colorHighlight = new Highlight();
  highlights.push(colorHighlight);

  // Enregistrez ce surlignage sous un nom personnalisé.
  CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight);
}

// Itérer sur le texte, caractère par caractère.
for (let i = 0; i < textNode.textContent.length; i++) {
  // Créez un nouveau champ juste pour ce caractère.
  const range = new Range();
  range.setStart(textNode, i);
  range.setEnd(textNode, i + 1);

  // Ajoutez le champ au surlignage disponible suivant,
  // en revenant au premier une fois que nous avons atteint le 7ème.
  highlights[i % 7].add(range);
}