quotation marks

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>
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 # # # # #