CSS - content

The content property defines content to be inserted in generated content operations. This property is used along with :before or :after pseudo elements.
string − Any permitted string value. This is always enclosed in quotation marks.
string − Any permitted string value. This is always enclosed in quotation marks.
URI − A pointer to an external resource such as an image.
URI − A pointer to an external resource such as an image.
counter − There are two possible forms of this value: counter(name, style?) and counters(name, string,? style?). In both cases, the content will be the value of the named counter at that point in the document, rendered in the optional style value (decimal by default). In the case of counters(...), the optional string value indicates a string to follow each instance of the named counter.
counter − There are two possible forms of this value: counter(name, style?) and counters(name, string,? style?). In both cases, the content will be the value of the named counter at that point in the document, rendered in the optional style value (decimal by default). In the case of counters(...), the optional string value indicates a string to follow each instance of the named counter.
attr(X) − Causes the insertion of the value of attribute X for the selector's subject. For example, it is possible to display the value of the alt attribute of an image using this value.
attr(X) − Causes the insertion of the value of attribute X for the selector's subject. For example, it is possible to display the value of the alt attribute of an image using this value.
open-quote − Causes the insertion of the appropriate string specified using the property quotes.
open-quote − Causes the insertion of the appropriate string specified using the property quotes.
close-quote − Causes the insertion of the appropriate string specified using the property quotes.
close-quote − Causes the insertion of the appropriate string specified using the property quotes.
no-open-quote − Prevents the insertion of the appropriate string specified using the property quotes. However, the nesting level of the quotation marks is still increased.
no-open-quote − Prevents the insertion of the appropriate string specified using the property quotes. However, the nesting level of the quotation marks is still increased.
no-close-quote − Prevents the insertion of the appropriate string specified using the property quotes. However, the nesting level of the quotation marks is still decreased.
no-close-quote − Prevents the insertion of the appropriate string specified using the property quotes. However, the nesting level of the quotation marks is still decreased.
:before and :after pseudo-elements.
object.style.content = "url(home.avi)"

Following is the example which demonstrates how to use :before element to add some content before any element.
<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html> 
This will produce following black link −
 This line will be preceded by a bullet.
 This line will be preceded by a bullet.
 This line will be preceded by a bullet.
Following is the example which demonstrates how to use :after element to add some content after any element.
<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>

   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html> 
This will produce following black link −
 This line will be succeeded by a bullet.
 This line will be succeeded by a bullet.
 This line will be succeeded by a bullet.

    33 Lectures 
     2.5 hours 

 Anadi Sharma

    26 Lectures 
     2.5 hours 

 Frahaan Hussain

    44 Lectures 
     4.5 hours 

 DigiFisk (Programming Is Fun)

    21 Lectures 
     2.5 hours 

 DigiFisk (Programming Is Fun)

    51 Lectures 
     7.5 hours 

 DigiFisk (Programming Is Fun)

    52 Lectures 
     4 hours 

 DigiFisk (Programming Is Fun)
 Print
 Add Notes
 Bookmark this page