B.91. quotes

The content property of :before and :after pseudo-elements lets you specify generated content that should appear before and/or after any element. Among the types of content that can be added are quotation marks. The quotes property lets you define the format of those quotes.

Since you can have quotes within quotes, this property lets you set what the quotes will look like at each nesting level.

Inherited: Yes

See also: Section B.25content

B.91.1. Value

A space-separated list of pairs of quote strings (see example below), or none. If pairs of strings are provided, the first pair will be used for the first (outermost) level of quotes, the second pair will be used for the first level of nested quotes, and so on. If the none constant is specified, the open-quote and close-quote elements of the content property will not generate any content.

The CSS2 specification does not cover how quotes should be rendered when they are at a nesting level for which quote strings are not provided; presumably, the final pair of quote strings would be used for all deeper nesting levels as well.

Initial value: A browser-specific series of quote strings.

B.91.2. Compatibility

CSS Version: 2

The best support for this property is provided by Opera 7; however, a bug in that browser does affect this feature. If you specify quote strings for n nesting levels, then any quoted elements at nesting level n+1 or deeper will have the close-quote string of the deepest specified nesting level as its open-quote string, and double quotes (") for its close-quote string.

Mozilla browsers (including Netscape 6) support this property, but the first pair of quote strings you specify are applied to all nesting levels.

Internet Explorer 5 for Macintosh supports the open-quote and close-quote elements of the content property, but it chooses the quote strings itself, ignoring this property.

Internet Explorer for Windows (up to and including version 6 in standards-compliant mode) does not support generated quotes.

B.91.3. Example

This example uses double quotes for the first (outermost) level of quotes, then single quotes for the second level (and presumably for all deeper levels). This setting is applied to the body element (it is inherited by all nested elements), and then quotes are added to blockquote and q (inline quote) elements:

body {
  quotes: '"' '"' "'" "'";
}
blockquote:before, q:before {
  content: open-quote;
}
blockquote:after, q:after {
  content:close-quote;
}