CSS content

View Output

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

Initial Value
normal
Applies To

In CSS 2.1: :before and :after pseudo-elements.

In CSS3: ::before, ::after, ::marker, and page margin boxes. Image and url values can apply to all elements.

Inherited?
No
Media
All
Animatable
Yes (see example)

Example Code

Official Specifications