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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
andclose-quote
values of thecontent
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 foropen-quote
andclose-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
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 |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
quotes | Chrome Full support 11 | Edge Full support 12 | Firefox Full support 1.5 | IE Full support 8 | Opera Full support 4 | Safari Full support 9 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 9 | Samsung Internet Android Full support 1.0 |
auto keyword | Chrome
No support
No
| Edge
No support
No
| Firefox Full support 70 | IE
No support
No
| Opera
No support
No
| Safari
No support
No
| WebView Android
No support
No
| Chrome Android
No support
No
| Firefox Android No support No | Opera Android
No support
No
| Safari iOS
No support
No
| Samsung Internet Android
No support
No
|
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.