Styling Blockquotes with CSS Pseudo Elements

November 9, 2006 by Pete Freitag

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 pseudo elements.

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

You can of course 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 pseudo elements, as they are part of CSS 2.

The quote is from Albert Einstein, BTW.