CSS content

The CSS content property creates generated content. It allows you to provide content that is not included in the HTML document or document tree.

The content property can be useful for doing things like, generating numbered headings, replacing elements with images or multimedia content, or inserting the word "Chapter", "Example", "Figure", etc in front of an applicable element. Rather than adding this content to the HTML document itself, you can use CSS to automatically generate it.

You can use pre-defined content (such as open-quote), a string, an external resource (such as an image), a counter (see counter-increment), or an attribute value.

Syntax

CSS 2.1 syntax:

CSS3 syntax:

Possible Values

The following values are based on the CSS 2.1 syntax.

none

The pseudo-element is not generated.

normal

Computes to none for the :before and :after pseudo-elements.

string

Specifies the text content to be generated.

URI

A URI that designates an external resource (such as an image).

counter

Counters can be specified with two different functions: counter() or counters().

counter()

This function has two forms: counter(name) or counter(name, style). The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style (decimal by default).

counters()

This function also has two forms: counters(name, string) or counters(name, string, style). The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style (decimal by default).

The name must not be none, inherit or initial (these will cause the declaration to be ignored).

open-quote and close-quote

These values are replaced by the appropriate string from the quotes property.

no-open-quote and no-close-quote

Introduces no content, but increments (decrements) the level of nesting for quotes.

attr(X)

This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector does not have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Example Code

Official Specifications

• CSS Generated Content Module Level 3 (W3C Working Draft)
• CSS Level 2.1 (W3C Recommendation 07 June 2011)