The q element in HTML marks up an inline quotation and is generally used to report short phrases from other authors. Browsers that support CSS generated content insert quotes before and after this element using the :before and :after pseudo-elements, respectively. Though sometimes it would be nice to see such quotes around that element, other times it's preferable to suppress them. How this can be done? CSS specifications show us a way to accomplish this task in the section about generated content and quotes:
In CSS 2.1, authors may specify, in a style-sensitive and context-dependent manner, how user agents should render quotation marks. The 'quotes' property specifies pairs of quotation marks for each level of embedded quotation. The 'content' property gives access to those quotation marks and causes them to be inserted before and after a quotation.
So we can write:
q:before {
content: no-open-quote;
}
q:after {
content: no-close-quote;
}
In some CSS reset files, the following variants are also used:
q:before {
content: none;
content: '';
}
q:after {
content: none;
content: '';
}
All these rules suppress quotes from inline quotations.