Content

CSS allows you to automatically generate content that doesn't belong to the document tree.

The content property allows to specify what content will be automatically generated.

The possible values are

<string>	to insert any text
<url>	to insert an internet resource e.g: url(fellas.jpg)
<counter>;	to insert a counter for a list
attr(A)	to insert the value of the A attribute
`open-quote` \| `close-quote` \| `no-open-quote` \| `no-close-quote`

Notes:

Note

- The default value of the 'content' property is empty - To insert a forced new line, "\A" escape sequence is used.(similar to <br> element)

snippet

<html>
<head>
    <style>
        :before{content: "<>"; color: red}
        :after{content: "</>"; color: red}
        table, form {display: block}
    </style>
</head>
<body>
    <h2>This is a Header 2</h2>
    <p>This is a paragraph. <i>Italic text</i>
        <blockquote>This is a blockquote</blockquote>
        <ul style="list-style-type: disc">
            <li>item 1</li>
            <li>item 2</li>
        </ul>
        <form>
            <input type="text">
            <input type="button" value="Submit">
        </form>

        <table>
            <tr><td>data 1</td><td>data 2</td></tr>
            <tr><td>data 3</td><td>data 4</td></tr>
        </table>
</body>
</html>

snippet


<head>
    <style>
        h2:before{content: "<h2>"; color: red}
        h2:after{content: "</h2>"; color: red}
        
        p:before{content: "<p>"; color: blue}
        p:after{content: "</p>"; color: blue}
        
        blockquote:before{content: "<blockquote>"; color: magenta}
        blockquote:after{content: "</blockquote>"; color: magenta}
        
        ul:before{content: "<ul>"; color: yellow}
        ul:after{content: "</ul>"; color: yellow}
        
        form:before{content: "<form>"; color: cyan}
        form:after{content: "</form>"; color: cyan}
        
        input:before{content: "<input type="attr(type)">"; color: lime}
        input:after{content: "</input>"; color: lime}
        
        span:before{content: url('bullet-1.png');}
        span:after{content: url('bullet-2.png');}
    </style>
</head>
<body>
    <h2>This is a Header 2</h2>
    <p>This is a paragraph. <i>Italic text</i>
        <blockquote>This is a blockquote</blockquote>
        <ul style="list-style-type: disc">
            <li>item 1</li>
            <li>item 2</li>
        </ul>
        <form>
            <input type="text">
            <input type="button" value="Submit">
        </form>
</body>
</html>