50

Lets say I have this paragraph:

<p class="myclass">This is my paragraph</p>

What is the CSS code to add double quotes to this paragraph? (So it will render "This is my paragraph")

.myclass {}
Rob W
  • 341,306
  • 83
  • 791
  • 678
webmasters
  • 5,663
  • 14
  • 51
  • 78
  • To give the quote some context, you may want to consider using a blockquote and then styling it using pseudo-elements as suggested. – Doozer Blake Nov 07 '11 at 17:42

4 Answers4

169

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:

  • 6
    It's disappointing that this answer doesn't have more upvotes... :( – Chris Jaynes Jan 18 '14 at 02:16
  • this worked fine for me with the exact style I wanted to – Ashish Kumar Feb 07 '14 at 05:22
  • 3
    I had no idea about the `lang` pseudo or that you could set quote characters for elements or that there are keywords for open/close-quote. So this answer is awesome and much more complete than the accepted answer. – zero298 Jun 27 '15 at 23:05
87
.myclass:before
{
content: '\201C';
}

.myclass:after
{
content: '\201D';
}
Pedryk
  • 1,643
  • 1
  • 13
  • 28
49

Use pseudo-elements:

p.myclass:before, p.myclass:after {
    content: '"';
}

Fiddle: http://jsfiddle.net/2bE8j/1/

Rob W
  • 341,306
  • 83
  • 791
  • 678
3

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.

Community
  • 1
  • 1
rockingtree
  • 31
  • 3