Next / Previous / Contents / TCC Help System / NM Tech homepage

16. The content property: Specifying content in pseudo-elements

Use the content property inside the :before or :after pseudo-elements to add content before or after some other element.

The value of this property consists of one or more items from this list, concatenated.


The literal string is inserted into generated content. For the form of literal strings, see Section 6.3, “String constants”.


Insert the content (e.g., an image) from the specified URI. See Section 6.4, “Universal resource identifiers (URIs)”.


Insert the value of the counter with the given name.

counter(name, style)

Insert the named counter, but present its value using the given style. The style codes are discussed in Section 17.1, “The list-style-type property”.

counters(name, string)

Insert all the counters with the given name, separated by the given string. This is used for hierarchical section numbers such as “3.1.4”; you use the same counter name at each level, and specify "." as the separator character.

counters(name, string, style)

To change the counter style from the default presentation as an integer, specify a style code, such as lower-roman for lowercase Roman numerals. The complete list of style codes is given in Section 17.1, “The list-style-type property”.


Adds the open quote character for the current level of nesting. By default, double quote (“) is used at the outer level, and single quote (‘) for a quote inside a quote. If you want to specify different quotes, see Section 12.10, “The quotes property: Specifying quote characters”.

Use of this value increments the quote-nesting level.


Adds the closing quote character for the current level of nesting. Use of this value decrements the quote-nesting level.


Like open-quote, this value increments the quote-nesting level, but it does not generate any content.


Like close-quote, this value decrements the quote-nesting level, but generates no content.


Generates the value of the aname attribute of the element to which this rule applies.

For example, suppose your document's div elements of class dog have an attribute dogname. This rule would insert the value of that attribute, in parentheses, as content after the rendering of the div:
{ :after
  { " (" attr(dogname) ")"

These properties are used only inside generated content:

16.1. The counter-reset property

Use this property inside a :before or :after pseudo-element to a counter to some specific value. Counters are used for tasks such as numbering sections of a document. You will pick a name for each counter; names must conform to the usual rules for HTML and XML elements.

The counter-reset property may have any of these values:


The named counter is reset to zero.

name int

The named counter is set to the value specified by the integer int.


counter-reset: chapter-no;
counter-reset: section-no 10;

The first example sets the counter named chapter-no to zero. The second example sets counter section-no to ten.

16.2. The counter-increment property

This property adds some number to a counter. Values may have either of two forms:


The named counter is incremented by one.

name int

The given integer is added to the named counter.


counter-increment: chapter-no;
counter-increment: section-no 10;

The first example adds one to the counter named chapter-no. The second example adds ten to the counter named section-no.