CSS Quotes
CSS quotes
What are quotation marks
quotes of CSS The quotes attribute allows browsers to render quotation marks around content. CSS quotes can be added to any element. They utilize the ::before and ::after pseudo-elements to insert quotation marks at the beginning and end of the element. These pseudo-elements are defined by the content attribute.
The CSS quotes attribute specifies how browsers render quotation marks added using the open-quote and close-quote values of the content attribute.
CSS Quote Values
The quotes attribute can take one of the following values −
- none : The open-quote and close-quote values of the content attribute do not generate quotes.
-
string string,+ : One or more string pairs are used as the values for open-quote and close-quote . The first pair represents the outermost quote. The second pair represents the quote for the first nested level, the next pair represents the quote for the next nested level, and so on.
-
initial : Depends on the user agent.
-
auto : Uses appropriate quotes based on the language value set for the selected element (e.g., via the lang attribute).
Quote characters
The following table describes the various quote characters:
| Quote type | Description | Entity number |
|---|---|---|
" |
Double quote | 022 |
' |
Single quote | 027 |
< |
Single angle quotation mark (left) | 2039 |
> |
Single angle quotation mark (right) | 203A |
<< |
Double angle quotation mark (left) | 0AB |
>></ code></td> |
Double angle quotation mark (right) | 0BB |
‘ |
Quotation mark (left) (height 6) | 2018 |
’ |
Quotation mark (right) (height 9) | 2019< /td> |
“ |
Quotation Mark (Left) (Height 6) | 201C |
” |
Quotation Mark (Right) (Height 9) | 201D |
„ |
Double Quotation Mark (Lower 9) | 201E |
CSS Quotation Marks – None
The none value of the quotes property indicates that the open-quote and close-quote values of the content property do not produce quotation marks. The following example demonstrates this:
<html>
<head>
<style>
p {
quotes: none;
}
p:before {
content: open-quote;
}
p:after {
content: close-quote;
}
</style>
</head>
<body>
<p>Tutorialspoint CSS Quotes set to <i>none</i></p>
</body>
</html>
CSS Single Quotes
The following example demonstrates specifying the quotes to use when using the string,string,+ value.
The first value specifies the first level of quote nesting, the next two values specify the next level of quote nesting, and so on.
<html>
<head>
<style>
#quote1 {
quotes: ''' ''';
}
#quote2 {
quotes: '"' '"';
}
#quote3 {
quotes: '<' '>';
}
#quote4 {
quotes: '2018' '2019';
}
</style>
</head>
<body>
<p><q id="quote1">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote2">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote3">Tutorialspoint CSS Quotes.</q></p>
<p><q id="quote4">Tutorialspoint CSS Quotes.</q></p>
</body>
</html>
CSS Quotes Initial Value
The following example demonstrates using the quotes: initial; property value. This value sets the default value for the quotes property.
<html>
<head>
<style>
q {
quotes: initial;
}
</style>
</head>
<body>
<p><q>Tutorialspoint CSS Quotes.</q></p>
</body>
</html>
CSS Autoquotes
Set the quotes property to auto to automatically determine the correct quotes based on the language – as shown in the following example:
<html>
<head>
<style>
q {
quotes: auto;
}
</style>
</head>
<body>
<div lang="fr">
<q>Tutorialpoint est un site de cours d'anglais.</q>
</div>
<hr />
<div lang="ru">
<q>Tutorialpoint — сайт курсов английского языка.</q>
</div>
<hr />
<div lang="de">
<q>Tutorialpoint is an een English course website.</q>
</div>
<hr />
<div lang="en">
<q>Tutorialpoint is an English course website.</q>
</div>
</body>
</html>
CSS Quotes :lang Pseudo-Class
You can also use the :lang pseudo-class to define different styles for quotes based on the language attribute (lang) in an element.
- The :lang(en) rule defines styles for elements with an English language attribute.
-
The :lang(fr) rule defines styles for elements with a French language attribute.
Example
Let’s look at an example −
<html>
<head>
<style>
:lang(en) {
quotes: "#" "#" "<<" ">>";
}
:lang(fr) {
quotes: '2039' '203A';
}
</style>
</head>
<body>
<p><q lang="en">Tutorialspoint CSS <q lang="en">Quotes</q>.</q></p>
<p>Tutorialspoint CSS <q lang="fr">Quotes</q>.</p>
</body>
</html>