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>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents