Content Property

The content property is used to insert the predefined content using the style sheet. The content property is used with ":after" and ":before" Pseudo elements. 

syntax:

<element>:after{content: <value>}

<element>:before{content: <value>}

Following are the values that are used for "content" property :

1. string: sets a string the string before or after the content of the element
2. counter: sets the counter value before or after the element.
3. attr(attribute): sets the content as the selector elements attribute.
4. open-quote: sets opening quote as content
5. close-quote: sets closing quote as content.
6. no-open-quote: Removes any open quote present before or after the element.
7. no-close-quote: removes any close quote present before or after the element.
8. url(url): sets the content as specified by the url. It can be image, video etc..
9. normal : sets the content to the normal.
10. none: sets content to nothing, if present 

Example 1: 

div.test_after:after
{
content: "This is test after";
font-size: 15px;
text-decoration: underline;
color:red;
}

output of the above code :

This is the test for the content class. 

Example 2:

div.test_content:before
{
content: "<"attr(class)">";
font-size: 15px;
text-decoration: underline;
color:red;
}

    This is sample with with attr().

Example 3: using counter

         

span.count_inc
{
   counter-increment: counter_val;
}
span.count_inc:before
{
 content: counter(counter_val);
}

        
           Output when above classes are applied to the span tag.

             Test value
             Test value
             Test value