B.25. content

Sometimes it makes sense to generate some text at the beginning or end of an element as part of that element's style. Termed generated content, this text is not part of the HTML document, but is generated purely by the style sheet. The CSS content property is intended for this purpose. You must apply it to the :before or :after pseudo-elements , as shown in the examples below.

Inherited: No

See also: Section B.26counter-increment, Section B.27counter-reset, Section B.91quotes

B.25.1. Value

The CSS2 specification mandates a number of different generated content formats, but several are not yet supported by current browsers (see the Compatibility section for details). You can use any combination of the following content formats by listing them one after the other, separated by spaces.

"arbitrary string"

This format lets you place a string of text before or after the actual content of the element. You cannot format this text by placing HTML code in the string—the browser will display the tags as text. Instead, use CSS to style the string, as in the examples below. The special code A in the string produces a line break (same effect as an HTML <br> tag).

url(http://url.goes.here)

This format lets you place some external resource before or after the actual content of the element. For example, if you supply a URL to an image, the browser should place that image before/after the content of the element. If you supply a URL to an HTML document, the browser should display the contents of the document before/after the content of the element.

There are obvious complexities that come into play here, but since no browsers yet support this format, any further discussion would be purely academic.

counter(name)

counter(name, style)

counters(name, string)

counters(name, string, style)

These formats let you generate numbered elements (for example, numbered section headings) without having to resort to an ordered list (<ol>) in the HTML document. You must define, increment, and reset your counters when appropriate using the counter-increment and counter-reset CSS properties, and then use one of the above formats to display the value of a counter where desired.

counter(name) will display the value of the named counter in decimal format, while counter(name, style) lets you specify the style in which to display the counter value (you can use any style allowed by the list-style-type CSS property). You can also define hierarchical counters to produce multiple-level numbering (e.g. "Section 5.2.3"), the values of which you can output with counters(name, string) or counters(name, string, style). The string argument specifies the string that is used to separate the numbers, and is typically a period (".").

attr(attribute)

This format lets you output the value of an attribute of the element (e.g. the title attribute of an <a> tag) before or after the actual content of the element.

open-quote

close-quote

These formats let you display opening or closing quotation marks, the exact appearance of which are dictated by the CSS quotes property.

no-open-quote

no-close-quote

These formats let you put "fake" opening or closing quotes that don't actually display anything, but which still jump in and out of nesting levels defined in the quotes property.

Initial value: "" (the empty string)

B.25.2. Compatibility

CSS Version: 2

Netscape 6, Mozilla, and Opera browsers support a subset of the formats discussed above. Specifically, they support the "arbitrary string" and quote-related formats. Internet Explorer browsers do not support this property up to and including IE6 for Windows.

B.25.3. Examples

This style rule puts the text "Note: " in bold at the start of a paragraph of class note:

p.note:before {
  content: "Note: ";
  font-weight: bold;
}

These style rules puts angle brackets (< >) around span elements of class tagname by using generated content and the quotes property:

span.tagname {
  quotes: "<" ">";
}
span.tagname:before {
  content: open-quote;
}
span.tagname:after {
  content: close-quote;
}

These style rules put quotation marks around <blockquote> elements. The third style rule (which is not supported by current browsers because of the use of attr(attribute)) applies to blockquote elements that have a cite attribute, and modifies the content property to close the quotation marks and then display the source of the citation on a new line.

blockquote:before {
  content: open-quote;
}
blockquote:after {
  content: close-quote;
}
blockquote[cite]:after {
  content: close-quote "Afrom " attr(cite);
}

Also unsupported by current browsers, these style rules should place a standard HTML header and footer on the current page:

body:before {
  content: url(standardheader.html);
}
body:after {
  content: url(standardfooter.html);
}