content

Description
Syntax
Examples
Links

Description

The content property for CSS dictates what is rendered inside an element or pseudo-element.

Syntax

CSS

content: value;

JS

object.style.content = "value";

Initial

normal

<!doctype html>
<html>
<head>
    <style>
        p::after
        {
            content: var(--myvar1);
        }
        p::before
        {
            content: var(--myvar2);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="' ' attr(id), attr(class) ' '">value</button>
    <p class="myclass" id="myid">attr</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            let myvalue1 = myvalue2 = myproperty;
            if(myproperty.indexOf(","))
            {
                const myvalue = myproperty.split(",");
                myvalue1 = myvalue[0];
                myvalue2 = myvalue[1];
            }
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty("--myvar1", myvalue1);
            mystyle.setProperty("--myvar2", myvalue2);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

3 · content-list

4 · content-list · JS

<!doctype html>
<html>
<head>
    <style>
        p::after
        {
            content: var(--myvar1);
        }
        p::before
        {
            content: var(--myvar2);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="url(/assets/svg/Happy100.svg), url(/assets/svg/Happy100.svg)">value</button>
    <p>content-list</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            let myvalue1 = myvalue2 = myproperty;
            if(myproperty.indexOf(","))
            {
                const myvalue = myproperty.split(",");
                myvalue1 = myvalue[0];
                myvalue2 = myvalue[1];
            }
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty("--myvar1", myvalue1);
            mystyle.setProperty("--myvar2", myvalue2);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

5 · content-replacement

6 · content-replacement · JS

7 · counter

8 · counter · JS

9 · none

10 · none · JS

<!doctype html>
<html>
<head>
    <style>
        p::after
        {
            content: var(--myvar1);
        }
        p::before
        {
            content: var(--myvar2);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="none, none">value</button>
    <p>none</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            let myvalue1 = myvalue2 = myproperty;
            if(myproperty.indexOf(","))
            {
                const myvalue = myproperty.split(",");
                myvalue1 = myvalue[0];
                myvalue2 = myvalue[1];
            }
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty("--myvar1", myvalue1);
            mystyle.setProperty("--myvar2", myvalue2);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

11 · normal

12 · normal · JS

<!doctype html>
<html>
<head>
    <style>
        p::after
        {
            content: var(--myvar1);
        }
        p::before
        {
            content: var(--myvar2);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="normal, normal">value</button>
    <p>normal</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            let myvalue1 = myvalue2 = myproperty;
            if(myproperty.indexOf(","))
            {
                const myvalue = myproperty.split(",");
                myvalue1 = myvalue[0];
                myvalue2 = myvalue[1];
            }
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty("--myvar1", myvalue1);
            mystyle.setProperty("--myvar2", myvalue2);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

13 · quote · open-quote

14 · quote · no-open-quote

15 · quote · close-quote

16 · quote · no-close-quote

17 · quore · JS

<!doctype html>
<html>
<head>
    <style>
        q::after
        {
            content: var(--myvar1);
        }
        q::before
        {
            content: var(--myvar2);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>open-quote</button>
    <button>no-open-quote</button>
    <button>close-quote</button>
    <button>no-close-quote</button>
    <p>John told us, <q>I met with Jane and she said, <q>Have a nice day!</q> </q></p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const mystyle = document.querySelector(":root").style;
            if(myproperty.match("close"))
            {
                mystyle.setProperty("--myvar1", myproperty);
            }
            else if(myproperty.match("open"))
            {
                mystyle.setProperty("--myvar2", myproperty);
            }
            else
            {
                mystyle.setProperty("--myvar1", myproperty);
                mystyle.setProperty("--myvar2", myproperty);
            }
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>

18 · string

19 · string · JS

<!doctype html>
<html>
<head>
    <style>
        p::after
        {
            content: var(--myvar1);
        }
        p::before
        {
            content: var(--myvar2);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value="' after', 'before '">value</button>
    <p>string</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            let myvalue1 = myvalue2 = myproperty;
            if(myproperty.indexOf(","))
            {
                const myvalue = myproperty.split(",");
                myvalue1 = myvalue[0];
                myvalue2 = myvalue[1];
            }
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty("--myvar1", myvalue1);
            mystyle.setProperty("--myvar2", myvalue2);
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>