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.
Quotation marks are not used with quotes (<q>) and blockquotes ( <blockquote>) which requires to add the quatation marks by yourself. They can be added 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 | Not specified. |
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | Object.style.quotes = “‘\2018’ ‘\2019′”; |
Syntax
quotes: none | string | initial | inherit;Example of the quotes property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.example {
quotes: "\00AB" "\00BB";
}
</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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
quotes: "\0022" "\0022" "\00AB" "\00BB";
}
</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>