CSS quotes

<!doctype html>
<title>Example</title>
<style>
p {
  font-size: 5vw;
}
p:lang(en) q { 
  quotes: "\201c" "\201d" "\2018" "\2019";
  }
p:lang(fr) q { 
  quotes: "\00AB\00A0" "\00A0\00BB";
  }  
</style>
<p lang="en">
  <q>Outer quote says <q>what inner quote said</q>!</q>
</p>
<p lang="fr">
  Forestier tendit les deux mains: <q lang="fr">Ah ! mon vieux ! comment vas-tu ?</q>
</p>

The CSS quotes property can be used to specify how user agents should render quotation marks.

In fine typography and across various languages, quotation marks can vary greatly. In American English, the most common convention is to use the left double quotation mark (“) to open the quote and the right double quotation mark (”) to close it. If another quote is nested within that quote, then it is surrounded by left single quotation mark (‘) and right single quotation mark (’).

However, these aren't the only characters that can be used for quotations. For example, many languages use the guillemet (or double chevron) for their quotation marks. These are represented by the Unicode U+00AB («) and U+00BB (») characters. In French, these are typically used with the no-break space (U+00A0) character.

So the quotes property allows you to specify exactly which characters are used when opening and closing quotations. It does this by specifying how the content property produces quotation marks when its value is either open-quote or close-quote.

You can use the content property to surround an element with quotes by using the ::before and ::after pseudo elements. Like this:

You may have noticed that when you use the q element, the browser automatically renders it with quotes even if you didn't specify any quotes in your style sheet. This is because, user agents are expected to do this (according to the HTML5.1 specification):

Quotation punctuation (such as quotation marks) that is quoting the contents of the element must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the user agent.

Furthermore, user agents are expected to use the appropriate quotes for the language (as outlined in the HTML5.1 spec). Therefore you won't need to add quotes in your own style sheet for the q element (unless you need to override another style declaration).

Syntax

Possible Values

none: Specifies that the 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: One or more string values for the open-quote and close-quote values of the content property. This is a list of pairs of (opening and closing) quotation marks. The first (leftmost) pair in the list represents the outermost level of quotation, the second pair the first level of embedding, etc.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: Depends on browser/user agent.
Applies To: All elements
Inherited?: Yes
Media: Visual
Animatable: Yes (see example)

Example Code

Official Specifications

CSS Generated Content Module Level 3 (W3C Working Draft, 2 June 2016)
CSS2.1 (W3C Recommendation 07 June 2011)