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 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.
/* 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: revert; quotes: revert-layer; quotes: unset;
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.
Initial value | depends on user agent |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
<q>To be or not to be. That's the question!</q>
q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; }
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.
<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></div> </div> </div> </div> </div> </div> </div> </div>
/*q {
quotes: auto;
}*/
Specification |
---|
CSS Generated Content Module Level 3 # quotes |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
quotes |
11 | 12 | 1.5 | 8 | 4 | 9 | 37 | 18 | 4 | 14 | 9 | 1.0 |
quotes_auto |
87 | 87 | 70 | NoThis value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting |
73 | previewThis value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting |
87 | 87 | No | NoThis value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting |
NoThis value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting |
14.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/quotes