CSS - quotes
CSS - quotes
CSS quotes property allows browser to render quotation marks for the content.
Quotes can be added to any element. They seek the benefit of pseudo-elements ::before and ::after to insert the quotation marks at the beginning and at the end of a quote. These pseudo-elements are defined by the content property.
This CSS quotes specifies how the browser should render quotation marks that are added using the open-quote and close-quote values of the content property.
Possible Values
- none − The open-quote and close-quote values of the content property produce no quotation marks.
none − The open-quote and close-quote values of the content property produce no quotation marks.
- string,string,+ − One or more pairs of string values for open-quote and close-quote . The first pair represents the outer level of quotation. The second pair is for the first nested level and next pair for third level and so on.
string,string,+ − One or more pairs of string values for open-quote and close-quote . The first pair represents the outer level of quotation. The second pair is for the first nested level and next pair for third level and so on.
- initial − Depends on user agent
initial − Depends on user agent
- auto − Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).
auto − Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).
Applies to
All elements.
Syntax
Keyword Value
quotes: none;
quotes: auto;<string> Value
quotes: "" "";
quotes: "" "" "" "";Following table describes the various quotation mark characters:
| Quotes | Description | Entity Number |
|---|---|---|
| ” | double quotes | \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 |
CSS quotes - none Value
The none value for the quotes property indicates that open-quote and close-quote values of the content property produce no quotation marks. Following example demonstartes this:
CSS quotes - <string> Value
Following example demonstartes specifies which quotation marks to use when string,string,+ value is used.
The first value specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, and so on
CSS quotes - initial Value
Followig example demonstrates use of the quotes: initial; property value. This values sets default values to quotes .
CSS quotes - auto Value
Sets the quotes property to the value auto that automatically determines the correct quotation marks based on the language - as demonstrated in the following example:
CSS quotes - Using :lang pseudo-class
You can also use the :lang pseudo-class to define different styles for quotation marks based on the language attribute (lang) within the elements.
- The :lang(en) rule defines styles for elements with the English language attribute.
The :lang(en) rule defines styles for elements with the English language attribute.
- The :lang(fr) rule defines styles for elements with the French language attribute.
The :lang(fr) rule defines styles for elements with the French language attribute.
Let us see an example −