TheCSSquotes property sets how the browser should render quotation marks that are automatically added to the HTML<q> element or added using theopen-quotes orclose-quotes (or omitted using theno-open-quote andno-close-quote) values of the of the CSScontent property.

Try it

quotes: none;

quotes: initial;

quotes: "'" "'";

quotes: "„" "“" "‚" "‘";

quotes: "«" "»" "‹" "›";

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

q {  font-size: 1.2rem;}

Browsers insert quotation marks at the opening and closing of<q> elements and for theopen-quote andclose-quote values of thecontent property. Each opening or closing quote is replaced by one of the strings from the value ofquotes, based on the depth of nesting, or, ifquotes is explicitly set to or otherwise resolves toauto, the quotation marks used are language dependent.

Syntax

/* Keyword value */quotes: none;quotes: auto;/* <string> values */quotes: "«" "»"; /* Set open-quote and close-quote to use French quotation marks */quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks *//* Global values */quotes: inherit;quotes: initial;quotes: revert;quotes: revert-layer;quotes: unset;

Values

none

Theopen-quote andclose-quote values of thecontent property produce no quotation marks, as ifno-open-quote andno-close-quote were set, respectively.

auto

Quotation marks that are typographically appropriate for the inherited language (i.e., via thelang attribute set on the parent or other ancestor).

<string>

Defines one or more pairs of quotation mark values for opening and closing quotes. In each pair, the first of each pair of quotes are used as the values for theopen-quote and the second of each pair is theclose-quote.

The first pair represents the quotation's outer level. The second pair, if present, represents the first nested level. The next pair is used for doubly nested levels, and so on. If the depth of quote nesting is greater than the number of pairs, the last pair in thequotes value is repeated.

Which pair of quotes is used depends on the depth, or nesting level, of quotes: the number of occurrences of<q> quotes oropen-quote (orno-open-quote) in all generated text before the current occurrence, minus the number of occurrences of closing quotes, either as</q>,close-quote, orno-close-quote. If the depth is 0, the first pair is used, if the depth is 1, the second pair is used, etc.

Formal definition

Formal syntax

quotes =
auto|
none|
match-parent|
[<string><string>]+

Examples

Default quotes and overrides

This examples compares the default quotes provided by the semantic HTML<q> element to those we define using the CSSquotes property.

The default value ofquotes isauto. In this example, the first list item hasquotes: auto set, so gets the default quotes for the language specified; the same as if noquotes property was set. The second list item defines which quotation marks to use for quotes and nested quotes; these quotation marks will be used for descendants of an element withspecialQuotes class regardless of the language (like anylang attribute values set).

HTML

<ul>  <li>    Default quotes:    <p lang="ru">      <q        >Митч Макконнелл - это человек, который знает о России и ее влиянии        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал        Трамп</q      >, - писал Раджу.    </p>  </li>  <li>    Defined by <code>quotes</code> property :    <p lang="ru">      <q        >Митч Макконнелл - это человек, который знает о России и ее влиянии        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал        Трамп</q      >, - писал Раджу.    </p>  </li></ul>

CSS

li {  quotes: auto;}.specialQuotes {  quotes: "“" "”" "‘" "’";}

Result

By default, browser provide language specific quotation marks when the<q> element is used. If thequotes property is defined, the values provided override the browser defaults. Note thequotes property is inherited. Thequotes property is set on the<li> with thespecialQuotes class, but the quotes are applied the<q> elements.

Note that each open-quote and close-quote is replaced by one of the strings from the value of quotes, based on the depth of nesting.

Auto quotes

The default value ofquotes isauto. This example works without it being explicitly being set.

HTML

<ul>  <li lang="fr">    <q>Ceci est une citation française.</q>  </li>  <li lang="ru">    <q>Это русская цитата</q>  </li>  <li lang="de">    <q>Dies ist ein deutsches Zitat</q>  </li>  <li lang="en">    <q>This is an English quote.</q>  </li></ul>

CSS

q {  quotes: auto;}li:not(:last-of-type) {  border-bottom: 1px solid;}

li {  padding: 0.5em 0;}

Result

Note that thelang attribute was placed on an ancestor of the<q>, not the<q> itself. If a quotation is in a different language than the surrounding text, it is customary to quote the text with the quote marks of the language of the surrounding text, not the language of the quotation itself.

With generated content

In this example, instead of using the<q> element, we are adding quotation marks to the::before and::after pseudo-elements before and after the content of each element with a specific class name.

HTML

<p>  <span>I should be using quotes</span>, I thought,  <span    >But why use semantic HTML elements when I can add classes to    <span>ALL THE THINGS!</span>?  </span></p>

CSS

.quote {  quotes: '"' '"' "'" "'";}.quote::before {  content: open-quote;}.quote::after {  content: close-quote;}

Result

Text as quotes and empty quotes

This example demonstrates using something other than quotation marks as the<string> values. The open-quote indicates the speaker and, as there is not opening quotation mark, the close-quote is the empty. (Mixing a<string> with an enumerated keyword to create a pair is not supported). We setauto for the nested quotes. These nested quotes will be book-ended by whatever the language dictates is normal for nested quotes.

HTML

<ul>  <li><q data-speaker="karen">Hello</q></li>  <li><q data-speaker="chad">Hi</q></li>  <li><q data-speaker="karen">this conversation is not interesting</q></li>  <li>    <q data-speaker="pat"      >OMG! <q>Hi</q>? Seriously? at least <q>hello</q> is five letters long.</q    >  </li></ul>

CSS

[data-speaker="karen" i] {  quotes: "She said: " "";}[data-speaker="chad" i] {  quotes: "He said: " "";}[data-speaker="pat" i] {  quotes: "They said: " "";}[data-speaker] q {  quotes: auto;}

li {  padding: 0.5em 0;}

Result

Specifications

Browser compatibility

See also

• CSS generated content module
• contain
• content