CSS quotes Property
The quotes property specifies the type of quotation marks to use for any number of embedded quotations in a document.
Possible Values
- "string string"+ - one or more pairs of strings - the first string containing the opening quotation marks and the second the closing quotation marks.
- none - the open-quote and close-quote values of the content property don't generate quotation marks.
- inherit - the value is inherited from the parent element.
Code Example
q{quotes:‘"’ ‘"’ "‘" "’" }
Using the above code the first level of quotes would be the first pair (double quotation marks) and the second level would be the single quotes of the second pair of strings. The quotation marks are included by using the open-quote and close-quote values of the CSS content property.
Working example
The following three lines of CSS will change the quotation marks displayed on <q> elements to *(asterisks) for first
level quotes and " " (double quotes) for nested <q> elements:
q{quotes:"*" "*" '"' '"' ;}
q:before{content: open-quote;}
q:after{content: close-quote;}
Result
My neighbour said to me the other day I overheard my daughter telling my son to
grow up
yesterday - I was most impressed.