Prefix and suffix generation

In XML documents, the ability to generate prefix and suffix text automatically is very important. For example, a Note element should not actually contain the prefix 'note:', or anything similar, but should only contain the note text itself:

<note>This is a note</note>

Prefix text

To indicate that this text is in fact a note when it is presented, a suitable prefix may be added. CSS is now able to do this using the 'before' pseudo-element, in conjunction with the new 'content' property:

note:before { content: "NOTE: " }

As the default value of the display property is 'inline', the prefix 'NOTE: ' is added to the text content of the Note element:

   NOTE: This is a note

However, explicitly changing this value to 'block' puts the prefix above the text:

note:before { content: "NOTE: " ; display: block }

   NOTE:
   This is a note

All other style properties are available. For example, to make the heading bold, the font-weight property may be used:

note:before { content: "NOTE: " ; font-weight: bold }

   NOTE: This is a note

Suffix text

For suffixes, there is an 'after' pseudo-element that works in exactly the same manner.

reference:before { content: "[" }

reference:after { content: "]" }

Quotes

To enclose the content of an element in quotes, it is advisable to use the 'open-quote' and 'close-quote' keywords:

quote:before { content: open-quote }

quote:after { content: close-quote }

What actually appears depends on a setting elsewhere, made using the 'quotes' property. For example, an English book may contain the following declaration, which states that left and right double-quote characters will be used, but then goes on to state, using additional parameters, that embedded quotes will be represented by single quote characters:

book[xml:lang="en"] { quotes: '"' '"' "'" "'"  }

Attribute display

The 'attr(…)' function is replaced by the value of the named attribute. For example, to supply the name of the speaker for each speech in a play:

speech:before { content: attr(speaker)  }

<speech speaker="Macbeth">...</speech>

Combinations

More complex options are made possible due to the fact that the 'content' property can take a number of parameters:

speech:before { content: "SPEAKER " attr(speaker) ":"}

   SPEAKER Macbeth: ……

Complex item numbering

Finally, it is possible to generate sequential item numbering, in a more powerful way than could be achieved using the 'list-item' property. The 'counter-reset' property defines, and optionally also specifies, the starting value (default '0'). Then the 'counter-increment' property is used to increase the named value. Each increase can be more (or less) than the default of '1', by adding the increment (or decrement) value after the counter name. To display the counter, the 'counter()' function in the 'display' property is used (note that the value shown is one that is current after any reset or increment property is processed, regardless of the ordering of properties in the rule). The following example adds numbers to each item in a list:

list        { counter-reset: item 0 }
item        { display: block }
item:before { counter-increment: item ;
               content: counter(item) ". " }

   1. first item
   2. second item