Thursday, December 6, 2012

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