quotes

The quotes CSS property sets how quotation marks appear.

Syntax

/* Keyword value */
quotes: none;

/* <string> values */
quotes: "«" "»";           /* Set open-quote and close-quote to the French quotation marks */
quotes: "«" "»" "‹" "›";   /* Set two levels of quotation marks */

/* Global values */
quotes: inherit;
quotes: initial;
quotes: unset;

Values

none

The open-quote and close-quote values of the content property produce no quotation marks.

[<string> <string>]+

One or more pairs of <string> values for open-quote and close-quote. The first pair represents the outer level of quotation, the second pair is for the first nested level, next pair for third level and so on.

Formal syntax

none | [ <string> <string> ]+

Example

HTML

<q>To be or not to be. That's the question!</q>

CSS

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

Result

Notes

Starting in Firefox 3.5, the initial value of the quotes property can be read using -moz-initial This wasn't possible in earlier versions of Firefox.

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• content