CSS quotes

The CSS quotes property is used to specify custom quotation marks for the ::before and ::after pseudo-elements when they are used with the content property to insert content generated with the open-quote and close-quote values.

By default, when you use content: open-quote; and content: close-quote; in conjunction with the ::before and ::after pseudo-elements, the browser displays the standard double quotation marks for the relevant language. However, with the quotes property, you can customize the quotation marks to use different characters or symbols.

The syntax for the quotes property is as follows:

selector {
  quotes: 'open-quote' 'close-quote';
}

• selector: Represents the HTML element or class to which the quotes property will be applied.
• 'open-quote' and 'close-quote': The values in single quotes represent the custom quotation marks you want to use as the opening and closing quotes, respectively.

You can define multiple sets of quotation marks by separating them with space. The first set is used for the outer level of quoting, and subsequent sets are used for nested quoting.

Example:

blockquote {
  quotes: "«" "»" "‘" "’";
}

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

In this example, we define a custom set of quotation marks using the quotes property for the <blockquote> element. The custom quotation marks consist of the French-style angle quotes (« and ») for the outer level of quoting and the single curly quotes (‘ and ’) for nested quoting.

With this setup, when you use the content: open-quote; and content: close-quote; with the ::before and ::after pseudo-elements within the <blockquote>, the browser will display the custom quotation marks instead of the default double quotation marks.

The quotes property is useful when you want to add a personal touch to your design or use quotation marks that better match the style of your content. It is particularly handy for multilingual websites or for providing context-specific quotation marks based on the language or cultural conventions of the content.