CSS quotes Property


The quotes property sets the type of quotation marks that is used in the text of the document. Each language has its own traditions for designating quotation marks, the quotes property allows you to specify the appearance of their display throughout the text and, thus, establish its uniform appearance. Quotation marks are added automatically for the contents of the <q> container, as well as for text to which the content style property is applied with the value open-quote (opening quote) or close-quote (closing quote).

Initial value
Depends on browser/user agent
Applies to
All elements
Computed value
Specified value
JavaScript syntax

Interactive Demo

Show us the wonder-working Brothers, let them come out publicly—and we will believe in them!


quotes: [<string> <string>]+ | none


  • noneThe 'open-quote' and 'close-quote' values of the 'content' property produce no quotations marks, as if they were 'no-open-quote' and 'no-close-quote' respectively.
  • [<string> <string>]+Values for the 'open-quote' and 'close-quote' values of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc.
  • inherit


<q>Plain Quote</q> 
<q>This is a <q> QUOTATION </q> inside the quote</q>
<p>A paragraph to which quotes are added using pseudo-classes.</p>
* {
   quotes: "" "" "" "‹ "" ›";
p::before { 
   content: open-quote;  
p::after { 
   content: close-quote;  

Browser Support

The following table will show you the current browser support for the CSS quotes property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024