content

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported No No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value Empty line
Inherited No
Applied To pseuduelements "before" and "after"
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/generate.html#content

Description
With the help of the attribute В«contentВ» you can paste generating content into web-page text. It is used with pseudo elements after and before. They indicate either display a new content after the element they are added or before it.

Syntax

content: line | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | url }

Arguments
Line
Text lines which are added on the web-page must be quoted. If you use the Unicode for special symbols pasting, special symbols HTML which are started from ampersand (for ex &sect) will be displayed as a simple text.
attr(attribute)
This attribute yields the line. The line is attribute value indicated in brackets. For example, IMG:after{content:attr(href)}adds parameter В«hrefВ» denotation. The line yields if there are no any indicated elements.
open-quote
It pastes an opening quote. The quote type is determined with the help of the style parameter quotes.
close-quote
Close-quote pastes a closing quote. The type of it is installed by the style parameter quotes.
no-open-quotes
An opening quote is not pasted into the indicated place. For example, tag <Q> adds quotes to the text it contains inside automatically.
no-close-quote
It cancels closing quote addition.
url
It is absolute or relational pasting object address. If the indicated file is not recognized by a browser, in that case the value is ignored.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>content</title>
  <style type="text/css">
   SPAN.tag {
    color: navy; /* Text color */
    font-family: monospace; /* Monospaced font */
    quotes: "<" ">"; /* Set the sort of quotes */
   } 
   SPAN.tag:before {
    content: open-quote; /* Add the open-quote before the text */
  }
   SPAN.tag:after {
    content: close-quote; /* Add the close-quote after the text */
   }
  </style>
 </head>
 <body>
 
  <p>Tag <span class="tag">DEL</span> is used
  for deselect of the text which was deleted in the new document version .</p> 
 
 </body>
</html>

The result of this example is shown on the figure 1


Remark
Browser Opera from the version 7 doesn't demand using the pseudoelements "before" and "after" and allows using of "content" for all elements.