Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP

14.8. Autogenerating Text

One of the strengths of CSS is its ability to generate additional text, not just format existing text. You saw how the :before and :after pseudoelements could be used to add text in Chapter 13. This section expands on the autogenerated text mechanisms.

Many user agents do not support generated content.

14.8.1. Define and Display Quotation Marks

The autogeneration features of CSS can be used to both define and display quotation marks. First, you need to define appropriate quote marks, and then you can add them to elements.

The quotes property takes a list of arguments in string format to use for the open and close quotes at multiple levels. This property has the following form:

quotes: < open_first_level > < close_first_level >
<open_second_level> <close_second_level> ... ;

The standard definition for most English uses (double quotes on first level, single quotes on second level) is as follows:

quotes: '"' '"' "'" "'";

The opposite quote type is used to encapsulate each quote character (single quote enclosing double and vice versa).

Once you define the quotes, you can use them along with the :before and :after pseudoelements, as in the following example:

blockquote:before { content: open-quote; }
blockquote:after  { content: close-quote; }

The open-quote and close-quote words are mnemonics for the values set in the quotes property. The content property also accepts string values, so you can use almost anything for its value.

14.8.2. Automatic Numbering ...