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
Computed value: Specified value
Animatable: No
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

HTML

<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>

CSS

* {
   quotes: "" "" "" "‹ "" ›";
 }
p::before { 
   content: open-quote;  
}
p::after { 
   content: close-quote;  
}

Result

Browser Support

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

Desktop

12	11	1.5	4	9

Tablets / Mobile

18	4	14	9	1	37

Last updated by CSSPortal on: 28th September 2023

Support Us