Quotes
The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML <q> element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 11 | 12 | 1.5 | 9 | 18 | 9 | |
auto | 87 | 87 | 70 | 14.1 | 87 | 14.5 |
none | 11 | 12 | 1.5 | 9 | 18 | 9 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
/* Japanese quotation marks */
:lang(ja) {
quotes: "「" "」" "『" "』";
}
/* Auto-select */
q {
quotes: auto;
}
/* Custom quotes */
.fancy-quote {
quotes: "\201C" "\201D" "\2018" "\2019";
}Live demo
Use cases
-
Using Quotes
The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML <q> element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.