content property creates generated content. It allows you to provide content that is not included in the HTML document or document tree.
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.
CSS 2.1 syntax:
The following values are based on the CSS 2.1 syntax.
- The pseudo-element is not generated.
- Computes to
- Specifies the text content to be generated.
- A URI that designates an external resource (such as an image).
- This function has two forms:
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 (
- This function also has two forms:
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 (
The name must not be
initial(these will cause the declaration to be ignored).
- These values are replaced by the appropriate string from the
- Introduces no content, but increments (decrements) the level of nesting for quotes.
- 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:
- Represents the value specified as the property's initial value.
- Represents the computed value of the property on the element's parent.
- This value acts as either
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.
- Initial Value
- Applies To
In CSS 2.1:
::marker, and page margin boxes. Image and url values can apply to all elements.
- Yes (see example)