CSS quotes Property
Use the quotes CSS property to set quotation marks to the content. See property values, quotation mark characters and examples.
The quotes property sets the type of quotation marks for the content.
The pseudo-elements ::before and ::after are used to insert the content marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.
Browsers apply default quotation marks to <q> and <blockquote> elements, but the quotes property allows you to customize them. You can apply custom quotation marks to any element.
There are different types of quotation marks, the popular ones are the straight and the curly quotation marks.
Quotation marks depend on the user agent.
| 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 | initial | inherit;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>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 |
Practice
What are the functions of the 'quotes' property in CSS?