CSS quotes Property
Use the quotes CSS property to set quotation marks to the content. See property values, quotation mark characters and examples.
The CSS quotes property defines which quotation mark characters a browser inserts when the content property requests open-quote or close-quote. In short, it lets you replace the default quotation marks with any characters you want — and even control which marks are used at each level of a nested quotation.
This page covers what the property does, its syntax and values, the most useful quotation-mark characters (with their Unicode escapes), and runnable examples for single-level and nested quotes.
How quotes works
The quotes property does not, by itself, put any quotation marks on the page. It only declares which characters should be used. The marks are actually drawn by the ::before and ::after pseudo-elements, whose content is set to the keywords open-quote and close-quote:
q {
quotes: "«" "»"; /* which marks to use */
}
q::before {
content: open-quote; /* draw the opening mark */
}
q::after {
content: close-quote; /* draw the closing mark */
}So three pieces always work together: quotes supplies the characters, and the two pseudo-elements place them. Without the content keywords nothing appears, no matter what quotes says.
You can declare the characters either literally ("«" "»") or with the CSS Unicode escape for the codepoint ("\00AB" "\00BB"). The escape form is handy when your stylesheet's encoding is uncertain or the mark is hard to type.
When to use it
- Style
<q>or<blockquote>quotation marks to match a language's convention (German„…", French« … », etc.). - Apply quotation marks to any element — not just
<q>— by combiningquoteswithopen-quote/close-quotecontent. - Provide distinct marks for nested quotations (see the four-value example below).
The default quotation marks used by <q> and <blockquote> depend on the user agent and on the document's lang. Set quotes explicitly when you need the same marks across browsers.
| Initial Value | none |
|---|---|
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | element.style.quotes = "'\2018' '\2019'"; |
Syntax
CSS quotes syntax
quotes: none | [<string> <string>]+ | auto | initial | inherit;The value is either the keyword none (or auto), or one or more pairs of strings. Each pair is an opening mark followed by a closing mark; the first pair is the outermost quotation level, the next pair the first nested level, and so on.
Example of the quotes property:
CSS quotes code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.example {
quotes: "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Result
Example of the quotes property with four values:
CSS quotes inside quotes example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
quotes: "\0022" "\0022" "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply <q>dummy</q> text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Here the outer <q> uses straight double quotes (\0022) and the inner one uses the angle marks («»), because the second string pair applies to the first nested level.
Values
| Value | Description | Play it |
|---|---|---|
| none | The "open-quote" and "close-quote" values of the content property do not produce quotation marks. | Play it » |
[<string> <string>]+ | Specifies the quotation mark. The first is the opening mark the second is the closing mark. The first pair represents the outer level of quotation, the second pair is for the first nested level. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Quotation Mark Characters
| Marks | Description | Entry Number |
|---|---|---|
| " | double quote | \0022 |
| ' | single quote | \0027 |
| ‹ | single, left angle quote | \2039 |
| › | single, right angle quote | \203A |
| « | double, left angle quote | \00AB |
| » | double, right angle quote | \00BB |
| ` | left quote (single high-6) | \2018 |
| ՛ | right quote (single high-9) | \2019 |
| “ | left quote (double high-6) | \201C |
| ” | right quote (double high-9) | \201D |
| „ | double quote (double low-9) | \201E |
Related properties
- content — sets
open-quote/close-quote(and any generated content) on the pseudo-elements. - ::before — inserts the opening mark before the element's content.
- ::after — inserts the closing mark after the element's content.