highlight

Description
Syntax
Examples
Links

Description

The highlight pseudo-element for CSS specifies the portion of a document that is being contained or partially contained in all the ranges of the registered custom highlight with the custom highlight name , if any.

Syntax

selector::highlight(<custom-highlight-name>)
{
    property: value;
}

Examples

1

2

3

<!doctype html>
<html>
<head>
    <style>
        p
        {
            font-size: 100px;
        }
        ::highlight(myname1)
        {
            background-color: rgba(255, 0, 0, 0.5);
        }
        ::highlight(myname2)
        {
            background-color: rgba(255, 255, 0, 0.5);
        }
        ::highlight(myname3)
        {
            background-color: rgba(0, 0, 255, 0.5);
        }
    </style>
</head>
<body>
    <p>paragraph</p>
    <script>
        const mynode = document.querySelector("p").firstChild;

const myrange1 = new Range();
        myrange1.setStart(mynode, 1);
        myrange1.setEnd(mynode, 4);

const myrange2 = new Range();
        myrange2.setStart(mynode, 2);
        myrange2.setEnd(mynode, mynode.length - 2);

const myrange3 = new Range();
        myrange3.setStart(mynode, mynode.length - 4);
        myrange3.setEnd(mynode, mynode.length - 1);

CSS.highlights.set("myname1", new Highlight(myrange1));
        CSS.highlights.set("myname2", new Highlight(myrange2));
        CSS.highlights.set("myname3", new Highlight(myrange3));
    </script>
</body>
</html>

4

const myrange1 = new Range();
        myrange1.setStart(mynode, 0);
        myrange1.setEnd(mynode, 1);

const myrange2 = new Range();
        myrange2.setStart(mynode, 2);
        myrange2.setEnd(mynode, 3);

const myrange3 = new Range();
        myrange3.setStart(mynode, 4);
        myrange3.setEnd(mynode, 5);

const myrange4 = new Range();
        myrange4.setStart(mynode, 2);
        myrange4.setEnd(mynode, mynode.length - 6);

const myrange5 = new Range();
        myrange5.setStart(mynode, 4);
        myrange5.setEnd(mynode, mynode.length - 4);

const myrange6 = new Range();
        myrange6.setStart(mynode, 6);
        myrange6.setEnd(mynode, mynode.length - 2);

const myrange7 = new Range();
        myrange7.setStart(mynode, mynode.length - 5);
        myrange7.setEnd(mynode, mynode.length - 4);

const myrange8 = new Range();
        myrange8.setStart(mynode, mynode.length - 3);
        myrange8.setEnd(mynode, mynode.length - 2);

const myrange9 = new Range();
        myrange9.setStart(mynode, mynode.length - 1);
        myrange9.setEnd(mynode, mynode.length);

CSS.highlights.set("myname1", new Highlight(myrange1, myrange2, myrange3));
        CSS.highlights.set("myname2", new Highlight(myrange4, myrange5, myrange6));
        CSS.highlights.set("myname3", new Highlight(myrange7, myrange8, myrange9));
    </script>
</body>
</html>