Definition
The quotes CSS property is used to specify quotation marks for content within an HTML document. It allows you to define custom quotation marks or change the default quotation marks used by the browser.
The quotes property accepts one or more values, which are specified as pairs of strings enclosed in double or single quotation marks. Each pair consists of an opening quotation mark and a closing quotation mark. Multiple pairs can be defined, and they are assigned to different levels of nesting.
Here’s an example:
blockquote {
quotes: "«" "»" "‘" "’";
}
In this example, the blockquote element is styled with the quotes property set to define custom quotation marks. The opening quote for the outermost level is set as "«" and the closing quote as "»". For nested levels, the opening and closing quotes are defined as "‘" and "’", respectively.
To apply the quotation marks to specific content, you can use the content property in combination with the ::before and ::after pseudo-elements. Here’s an example:
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}
In this example, the ::before pseudo-element inserts the opening quotation mark defined by the quotes property before the content of the blockquote element. Similarly, the ::after pseudo-element inserts the closing quotation mark.
The quotes property provides flexibility in customizing quotation marks to match specific design requirements. It is commonly used in typography and styling blockquotes or other content that requires quotation marks.