quotes supplies opening/closing mark pairs used by q’s default quote pseudo-elements or explicit open-quote/close-quote content. It does not replace quotation marks already typed in HTML.
Set outer and nested pairs
These fictional practice quotes show the first and second nesting levels. Deeper nesting reuses the last pair.
HTML and CSS
HTML
<p>
A fictional note says <q>Try <q>one change</q> first</q>.
</p>CSS
q {
quotes: "«" "»" "‹" "›";
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Generate marks for an actual block quotation
Blockquote does not add visible marks by itself. Explicit quote pseudo-elements use the inherited pairs; the quotation is labeled as fictional practice text.
HTML and CSS
HTML
<p>Fictional practice quotation:</p>
<blockquote>Check the source before changing the result.</blockquote>CSS
blockquote {
quotes: "“" "”" "‘" "’";
}
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Values and defaults
Quotes is inherited. Auto lets browsers choose language-appropriate marks; historical initial behavior is user-agent dependent. None generates no visible marks while quote nesting still changes. Custom values are one or more opening/closing string pairs. An unmatched single string is invalid.
Common mistakes
Setting quotes alone on blockquote does not create pseudo-elements. Open-quote increments nesting and close-quote decrements it. No-open-quote/no-close-quote adjust nesting without displaying marks. Do not add literal quotes around q unless you also handle its generated marks, or you can get doubled punctuation. Set lang for meaningful language-dependent punctuation.
Learn q, blockquote, and content.
Sources and browser support
MDN: quotes describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.