Styling Blockquotes with CSS Psudo Elements

November 09, 2006
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.



6 people found this page useful, what do you think?

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 =)
Bah, the effect is this: " blockquote " =P
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.


foundeo