Adding double quotes to a paragraph with CSS
Actually, the accepted answer is wrong, or at least suboptimal. It should be:
q { quotes: '\201c' '\201d'; }
q:before { content: open-quote; }
q:after { content: close-quote; }
The \201c
here is Unicode for a left curly double quote. There's no reason you could not write the double quotes directly in the rule for q
:
q { quotes: '“' '”'}
open-quote
and close-quote
are special values for the content
property, which refer to the strings given as values for the quotes
property.
Now you can just say:
<p><q>This is my paragraph</q></p>
Or some variant thereof; you could of course add the before
and after
rules directly on p
if you would prefer:
body { quotes: '\201c' '\201d'; }
p:before { content: open-quote; }
p:after { content: close-quote; }
This permits you to factor out the specific characters used for quotes using the quotes
property, without changing all the before
and after
rules. For instance, you can then do things such as
:lang(de) { quotes: "»" "«"; }
to get German-style quotes, if the lang
attribute has been set to de
on any ancestor.
The quotes
property actually allows you to specify additional sets of quotes, for use with nested quotes. See the docs for more details.
body { quotes: '\201c' '\201d'; }
q:before { content: open-quote; }
q:after { content: close-quote; }
:lang(de) { quotes: "»" "«"; }
<p>Quoth the raven, <q>Never more.</q></p>
<p lang="de">Sprach der Rabe: <q>Nie du Tor.</q></p>
References:
quotes
property:lang
pseudo-classcontent
property, withopen-quote
andclose-quote
valuesq
element for quoted strings
.myclass:before
{
content: '\201C';
}
.myclass:after
{
content: '\201D';
}
Use pseudo-elements:
p.myclass:before, p.myclass:after {
content: '"';
}
Fiddle: http://jsfiddle.net/2bE8j/1/
Here is what I did to make the quotations on my blockquote work.
This is for the first quotation mark:
blockquote:before{content: open-quote;}
and this is for the second quotation mark:
blockquote:after{content: close-quote;)
However, this only works in CSS3.