CSS allows to define quotation marks for any element. The following two steps are required to achive this.
i. The quotation marks must be defined. To define a set of quotation marks, use a selector and the 'quotes' property.
The possible values are none or a space-delimited list of pairs.
<string1> <string2> to define each level of quotation.
<string1> - for open quoatation mark
<string2> - for close quotation mark
ii. The quotation marks can be inserted using the :before or :after pseudo-elements with the 'content' property set to one of these four values.
open-quote | close-quote | no-open-quote | no-close-quote
Note:
- To define a string, you can use single (') or double (") quotation marks
- Quotation mark can be attached to any element
- Quotation mark can be specified to each element
- We can use escape sequences to define quotation mark characters
| "\00AB" | << |
| "\00BB" | >> |
| "\2018" | ' |
| "\2019" | ' |
| "\201C" | " |
| "\201D" | " |
snippet
<html>
<head>
<style>
p{quotes: '"' '"'; color:red;}
p>p{quotes: "'" "'"; color:blue;}
p>p>p{quotes: "<" ">"; color:purple;}
p:before{content: open-quote;}
p:after{content: close-quote;}
</style>
</head>
<body>
<p>This is first level paragraph
<p>This is second level paragraph
<p>This is third level paragraph</p>This is second level paragraph</p>This is first level paragraph</p>
</body>
</html>
