Generated quotes

Quotes can also be dynamically generated in CSS2. Unless your web page is
a thesis paper, you may not use this feature all that often, though it's
definitely still worth learning about.

Generated quotes in CSS2 is accomplished by first defining the kind of
quotes you want via the "quotes" property:

P.myquotes{quotes: '"' '"';}

Quotes are always specified in pairs, one for the opening and one of the
closing quotation mark. In this case, I want the standard double quote (")
in both cases, which is done by wrapping each double quote in single quote.
Having done this, you now formally apply this quote behavior to an element:

open-quote: Inserts an opening quotation mark per the "quotes"
property

close-quote: Inserts a closing quotation mark per the "quotes"
property

no-open-quote: No opening quotation is inserted.

no-close-quote: No closing quotation is inserted.

The "quotes" property is nifty in that it allows you to not only
customize the type of quote to be shown, but also, the behavior of nested
quotes. One thing at a time.

Specifying the type of quote

You can specify any string value as the opening and closing quotation
mark inside the "quotes" property, though obviously you don't want to go
nuts here. You can also input ISO characters to derive some classic quotes
look, like curly quotes. Here are some ISO characters you can input:

Type of quotation

ISO character

" (standard quotation)

0022

' (single quotation)

0027

< (single left angle quotation)

2039

> (single rght angle quotation)

203A

« (double left angle quotation)

00AB

» (double right angle quotation)

00BB

` (single left quotation)

2018

' (single right quotation)

2019

`` (double left quotation/ curly)

201C

'' (double right quotation/ curly)

201D

,, (double low-9 quotation)

201E

So for example, the below adds some bold curly quotes around the
BLOCKQUOTE element:

blockquote{quotes: "\201C" "\201D";}
blockquote:before{content: open-quote; font-weight: bold;}
blockquote:after{content: close-quote; font-weight: bold;}
<blockquote>
What happens is not as important as how you react to what happens.
</blockquote>

Example (screenshot):

Specifying nested quotes

You can also dictate how quotes appear when nesting occurs, such as when
there is a quote within a quote. This is done by entering multiple pairs of
values within the "quote" property:

.quoteit{quotes: '"' '"' "'" "'";}

The above specifies that the second level of quotes should be single
quotes. You can add a third level by adding an additional pair of values.