Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

quotes

The quotes property specifies pairs of quotation marks (opening and closing) for each level of quotation. I think the idea is to set up different quotation marks for different languages. For example:

q:lang(en) {quotes: ’"’ ’"’ "’" "’" ;}

In our example, the first level quote has double quotation marks and the second level has single quotation marks. The browser must apply the appropriate pair of quotation marks according to the level of embedding.

You use it together with the content property. If you set the content property to take open-quote and close-quote values, the quotation marks that appear are taken from this list of pairs of quotation marks.

For example, applying the following style sheet:

q:lang(en) {quotes: ’"’ ’"’ "’" "’";}
q:before   {content: open-quote;}
q:after    {content: close-quote;}

to the following HTML fragment:

<q>Quote me!</q>

And the browser displays:

"Quote me!"

Here are some common quotation marks:

Quote

ISO 10646 in hex

"

0022 (double quotation mark)

'

0027 (an apostrophe)

<

2039

>

203A

«

00AB

»

00BB

2018

2019

201C

201D