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 (
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
You can use the
content property to surround an element with quotes by using the
::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).
- Specifies that the
close-quotevalues of the
contentproperty produce no quotations marks, as if they were
- One or more string values for the
close-quotevalues of the
contentproperty. 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:
- Represents the value specified as the property's initial value.
- Represents the computed value of the property on the element's parent.
- This value acts as either
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.
- Initial Value
- Depends on browser/user agent.
- Applies To
- All elements
- Yes (see example)