first-line

Description
Syntax
Examples
Links

Description

The first-line CSS pseudo-element specifies the first line of the originating element.

Syntax

selector::first-line
{
    property: value;
}

<!doctype html>
<html>
<head>
    <style>
        p::first-line
        {
            color: red;
        }
    </style>
</head>
<body>
    <p>first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line</p>
</body>
</html>

2 · JS

<!doctype html>
<html>
<head>
    <style>
        p::first-line
        {
            color: var(--myvar);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="red">value</button><br>
    <p>first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line first-line</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector(":root").style.setProperty("--myvar", myproperty);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>