::highlight()

::highlight(custom-highlight-name) 

<p id="rainbow-text">CSS Custom Highlight API rainbow</p> 

#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; } 

const textNode = document.getElementById("rainbow-text").firstChild; if (!CSS.highlights) { textNode.textContent = "The CSS Custom Highlight API is not supported in this browser!"; } // Create and register highlights for each color in the rainbow. const highlights = []; for (let i = 0; i < 7; i++) { // Create a new highlight for this color. const colorHighlight = new Highlight(); highlights.push(colorHighlight); // Register this highlight under a custom name. CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight); } // Iterate over the text, character by character. for (let i = 0; i < textNode.textContent.length; i++) { // Create a new range just for this character. const range = new Range(); range.setStart(textNode, i); range.setEnd(textNode, i + 1); // Add the range to the next available highlight, // looping back to the first one once we've reached the 7th. highlights[i % 7].add(range); }