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
8	12	11	1.5	4	9
Tablets / Mobile
37	18	4	14	9	1.0

Last updated by CSSPortal on: 3rd November 2019