Quote controls with HTML & CSS
You can use the <q> HTML5 element to automatically wrap some content in quotes. Most modern browsers implement it by surrounding the text in quote marks. Also use the before and after CSS pseudo element to also show any element in quotes. If you want to use curly quotes for all or some particular content or use Guillemets « » as they in the French language you can set how quotes display using the quotes CSS property.
/*
The q:before and q:after isn't required here since most modern browsers will
automatically insert quotes for a q element
*/
q:before, .quote:before {
content: open-quote;
}
q:after, .quote:after {
content: close-quote;
}
[lang="fr"] {
quotes: "\00ab" "\00bb";
}
.curly {
quotes: "\201C" "\201D";
}With this HTML:
<q>French Quote</q>
<span class="quote">French Quote 2</span>
</div>
<div>
<q>Other Quote</q>
<span class="quote">Other Quote 2</span>
<q class="curly">Curly Quote</q>
</div>Will render:
<<French Quote>>
<<French Quote 2>>
"Other Quote"
"Other Quote 2"
“Curly Quote”