quotes

The quotes CSS property sets how quotation marks appear.

Syntax

/* Keyword value */
quotes: none;
quotes: auto;

/* <string> values */
quotes: "«" "»";           /* Set open-quote and close-quote to the French quotation marks */
quotes: "«" "»" "‹" "›";   /* Set two levels of quotation marks */

/* Global values */
quotes: inherit;
quotes: initial;
quotes: unset;

Values

none
The open-quote and close-quote values of the content property produce no quotation marks.
auto
Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).
[<string> <string>]+
One or more pairs of <string> values for open-quote and close-quote. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.

Formal syntax

none | auto | [ <string> <string> ]+

Examples

Basic quote marks

<q>To be or not to be. That's the question!</q>
q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

Auto quotes

<div lang="fr">
  <q>Ceci est une citation française.</q>
<div>
<hr>
<div lang="ru">
  <q>Это русская цитата</q>
<div>
<hr>  
<div lang="de">
  <q>Dies ist ein deutsches Zitat</q>
<div>
<hr>
<div lang="en">
  <q>This is an English quote.</q>
<div>
/*q {
  quotes: auto;
}*/

Notes

  • For most browsers, the default value of quotes is auto anyway (Firefox 70+), or the browser otherwise had this default behavior (Chromiums, Safari, Edge) so the above example would work without it being explicitly being set.
  • 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.

Specifications

Specification Status Comment
CSS Generated Content Module Level 3
The definition of 'quotes' in that specification.
Working Draft
CSS Level 2 (Revision 1)
The definition of 'quotes' in that specification.
Recommendation Initial definition
Initial valuedepends on user agent
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
quotesChrome Full support 11Edge Full support 12Firefox Full support 1.5IE Full support 8Opera Full support 4Safari Full support 9WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android ? Safari iOS Full support 9Samsung Internet Android ?
auto keywordChrome No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Edge No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Firefox Full support 70IE No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Opera No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Safari No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
WebView Android No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Chrome Android No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Firefox Android No support NoOpera Android No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Safari iOS No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Samsung Internet Android No support No
Notes
No support No
Notes
Notes This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

See also