Change the Quotes with CSS


Browsers can automatically add quotations in pages for the HTML q element. The default quotes are the double quotations at the top of the text. This, however, is changeable.

The CSS quotes property allows you to set pairs of characters to be used for the quotations, in place of the default double quotes used by the browsers.

q {
quotes: "< " " >";

view raw
hosted with ❤ by GitHub

Here’s how it looks like:


You can set more than one pair of quotation symbols in the quotes values. Each pair, from left to right, will be used for each nested q element, from outside in. Here‘s an example.

The Author

Web developer and writer. @rpsthecoder in Twitter.