CSS quotes Property

Description

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
Inherited
Yes
Media
Visual
Computed value
Specified value
Animatable
No
CSS Version
CSS2, CSS3
JavaScript syntax
object.style.quotes

Syntax

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

Values

  • 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

Example

<q>Plain Quote</q> 
<br>
<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

Desktop
Explorer Edge Chrome Firefox Opera Safari
812111.549
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
37184X9X

Last updated by CSSPortal on: 3rd November 2019