CSS Reference Property

quotes

The quotes property is used to specify which quotation marks to use when they are inserted using the content property.

Quotes (<q>) and blockquotes (<blockquote>) are rendered without quotation marks, so it is required that you add the quotation marks by yourself. Quotation marks can also be added to any element, and are not exclusive to quotes and/or blockquotes.

The pseudo-elements ::before and ::after are used to insert the content marks at the beginning and end of a quote, respectively. The actual content of the two is defined using the content property. And in order to insert quotation marks using the two, the content property is given the values open-quote and close-quote, where open-quote specifies the opening quote to use, and close-quote specifies the closing quote.

But there are different kinds of quotes (curly, straight, French, etc.), so how does the user agent (web browser, email app, etc.) know which ones to use? And if you have nested quotes, you would probably want to use different quotation marks for the different quote levels, and so if you do, you also need to tell the user agent which quotation marks to use for the different levels in nested quotes.

The quotes property is used to specify which (the type of) quotation marks to use.

Using the quotes property, you can provide the user agent with pairs of quotation marks that you want to use for different quote levels. You can specify any number of pairs you want. Which pair of quotes is used depends on the nesting level of quotes. The user agent must apply the appropriate pair of quotation marks according to the level of nesting. If the nesting depth is greater than the number of pairs, the last pair is repeated.

The following example defines one and two pairs of curly quotation marks to use for quotes and blockquotes, using the quotes property:

q, blockquote {

    quotes: "“" "”"; /* one pair */

    /* OR */

    quotes: "“" "”" "‘" "’"; /* two pairs */
}

The first (leftmost) pair is used for the outermost level of quotation, the second pair is used for the first level depth in nested quotations (a <q> inside a <q>), the third pair is used for quotes that are two levels deep (a <q> inside a <q> which is inside a <q>), and so on.

quotes-pairs — Each specified quotation mark is enclosed in quotation marks (gray color), but the enclosing quotation marks are programmatic and are required to define the quotation marks. The quotation marks inside the programmatic ones are the ones that are going to be inserted into a quote. For clarification, the programmatic quotation marks are colored gray in this image.

When you provide a pair of quotation marks, each pair will, of course, have an opening mark and a closing mark.
The open-quote value refers to the first quote in a pair of quotes (usually the opening quote), and close-quote refers to the second quote (the closing quote) in the same pair, as shown in the image above.

A complete example using open-quote and close-quote to add quotation marks to quotes and blockquotes is the following:

q {
    quotes: "“" "”" "‘" "’";
}

/* insert the quotes using pseudo-elements and the `content` property */

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

In addition to the open-quote and close-quote values of the content property, two other values exist: no-open-quote and no-close-quote. These two values stop the quotation marks from being displayed but continue to increment (decrement) the level of nesting for quotes.

Trivia & Notes

There are different types of quotation marks. Two known types are the straight and the curly. Curly quotes are the ones that are recommended for good typography—they are referred to as “smart quotes”; straight quotes are called “dumb quotes”. You can read more about these types in the following articles:

Official Syntax

Syntax:

quotes: [<string> <string>]+ | none | inherit

Initial: depends on the user agent
Applies To: all elements
Animatable: no

Values

none: The open-quote and close-quote values of the content property produce no quotation marks.
[<string> <string>]+: Values for the open-quote and close-quote values of the content property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair is used for the outermost level of quotation, the second pair is used for the first nested level in nested quotations, the third pair is used for quotes that are two levels deep, and so on. The user agent must apply the appropriate pair of quotation marks according to the level of nesting.

Examples

In addition to the curly and straight (“smart” and “dumb”) quotation marks mentioned before, there are also the “French” quotation marks. The following example defines two pairs of quotation marks to be used for quotes: double French quotation marks, and single French quotation marks for nested quotes.

q {
    quotes: "«" "»" "‹" "›";
}

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

q:before, q:after {
    color: purple;
}

The example can be seen live in the next section.

Live Demo

View this demo on the Codrops Playground

Browser Support

The quotes property is supported in Chrome, Firefox, Safari (?), Opera, Internet Explorer 8+, and on Android (?) and iOS (?).

Notes

Starting in Firefox 3.5, the initial value of the quotes property can be read using -moz-initial. This wasn’t possible in earlier versions of Firefox.