Pete Freitag Pete Freitag

Styling Blockquotes with CSS Psudo Elements

Published on November 09, 2006
By Pete Freitag
web

Have you ever wanted to add big quotation marks to your blockquote automatically? There is a really slick way you can do this with just CSS using the :before and :after psudo elements.

blockquote { padding: 10px; }
blockquote:before {
  content: open-quote;
}
blockquote:after {
  content: close-quote;
}

You can ofcourse add more CSS to those elements, for instance I set color: silver; here's an example:

Everything should be made as simple as possible, but not simpler.

I should point out that if your using IE6 or below you probably won't see the quotes. I haven't tested IE 7, but I would think that it supports the before and after psudo elements, as they are part of CSS 2.

The quote is from Albert Einstein, BTW.



css blockquote psudo style before after

Styling Blockquotes with CSS Psudo Elements was first published on November 09, 2006.


Discuss / Follow me on Twitter ↯

Comments

Sadly, yeah. I just checked this page with IE7 and I can't see the quotes that are there in Firefox.

Additionally when I tried it I got this effect:

<blockquote><p>This is a blockquote</p></blockquote>

Make sure that your blockquote text isn't surrounded by P tags =)
by illovich on 11/12/2006 at 1:13:59 PM UTC
Bah, the effect is this:

"
blockquote
"

=P
by illovich on 11/12/2006 at 1:15:13 PM UTC
Yeah I kind of thought it would work in IE7 as well, but It doesn't appear to be working on Safari either.

So make that two surprises for me.
by Pete Freitag on 11/12/2006 at 7:39:46 PM UTC