Contents
In some cases, authors may want user agents to display content that does not come from the document tree. One familiar example of this is a numbered list; the author does not want to list the numbers explicitly, he or she wants the user agent to generate them automatically. Similarly, authors may want the user agent to insert the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. For audio or braille in particular, user agents should be able to insert these strings.
In CSS2, inserted content can consist of combinations of the following:
Below we describe the mechanisms CSS2 offers for specifying generated content.
Authors specify generated content with the :before and :after pseudo-elements. The 'content' property of these pseudo-elements specifies what is inserted. :before and :after inherit any inheritable properties from the element to which they are attached.
For example, the following rule inserts a double quote mark before and after every Q element. The color of the quote will be red, but the font will be the same as the font of the rest of the Q element:
Q:before, Q:after {
content: "\"";
color: red
}
In a :before or :after pseudo-element declaration, non-inherited properties take their initial value.
Because the initial value of the 'display' property is 'inline', the quote in the previous example is inserted as an inline box, and not above (or below) the content of the Q. The next example explicitly sets the 'display' property to 'block', so that the inserted text becomes a block:
BODY:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
| Property name: | 'content' |
|---|---|
| Value: | [ <string> | <uri> | <counter> ]+ | inherit |
| Initial: | empty string |
| Applies to: | :before and :after |
| Inherited: | no |
| Percentage values: | N/A |
| Media groups: | all |
The value of the 'content' property is a sequence of strings, URIs, and counters. The various parts are laid out as inline boxes inside the element.
The values have the following meanings:
Note. In future levels of CSS, the 'content' property may accept additional values, allowing it to vary the style of the generated content, but in CSS2 the content of the :before or :after pseudo-element is all in one style.
[How to do language-dependent quotes? [LANG=fr] Q:before{content: "«"} doesn't work. How about Q:fr-fr:before {content: "«"} ? or @lang fr-fr {Q:before{content: "«"}} ?]
Newlines can be included in the generated content by writing the "\A" (or "\00000A") escape sequence in one of the strings after the 'content' property. This inserts a forced line break, similar to the BR element in HTML. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.
Example:
H1:before {
display: block;
content: "chapter\00000Achapter\00000Achapter"
}
This is a placeholder.