W3cubDocs

/CSS

quotes

The quotes CSS property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the CSS content property.

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 definition

Initial value depends on user agent
Applies to all elements
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

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

Examples

Basic quote marks

HTML

<q>To be or not to be. That's the question!</q>

CSS

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

Result

Auto quotes

For most browsers, the default value of quotes is auto (Firefox 70+), or the browser otherwise had this default behavior (Chromiums, Safari, Edge), so this example works without it being explicitly being set.

HTML

<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>

CSS

/*q {
  quotes: auto;
}*/

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
quotes 11 12 1.5 8 4 9
auto keyword No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
70 No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
quotes 37 18 4 14 9 1.0
auto keyword No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
No No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
No
No
This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/quotes