highlight

<!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>
        let mynode = document.querySelector("p").firstChild;

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

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

let 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>

<!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>
        let mynode = document.querySelector("p").firstChild;

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

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

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

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

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

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

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

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

let 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>

Syntax

Examples

1

2

3

4

Links

Pseudo-Elements

External