Web/CSS/quotes

The quotes CSS property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the CSS content property.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Syntax

/* Keyword value */
quotes: none;
quotes: auto;

/* <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.

auto

Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).

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

Initial value	depends on user agent
Applies to	all elements
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

none | auto | [ <string> <string> ]+

Examples

Basic quote marks

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

Auto quotes

For most browsers, the default value of quotes is auto (Firefox 70+), or the browser otherwise had this default behavior (Chromiums, Safari, Edge), so this example works without it being explicitly being set.

HTML

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

CSS

/*q {
  quotes: auto;
}*/

Specifications

Specification	Status	Comment
CSS Generated Content Module Level 3The definition of 'quotes' in that specification.	Working Draft
CSS Level 2 (Revision 1)The definition of 'quotes' in that specification.	Recommendation	Initial definition

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
quotes	Chrome Full support 11	Edge Full support 12	Firefox Full support 1.5	IE Full support 8	Opera Full support 4	Safari Full support 9	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 14	Safari iOS Full support 9	Samsung Internet Android Full support 1.0
auto keyword	Chrome No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Edge No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Firefox Full support 70	IE No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Opera No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Safari No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	WebView Android No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Chrome Android No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Firefox Android No support No	Opera Android No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Safari iOS No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting	Samsung Internet Android No support No Notes' No support No Notes' Notes' This value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting

Legend

Full support  

Full support

No support  

No support

See implementation notes.'

See implementation notes.

See also

• content

quotes by Mozilla Contributors is licensed under CC-BY-SA 2.5.