Styling Blockquotes

I’ve been playing with around with the styling of <blockquotes> recently, so I thought I’d share a few tips on making a better looking blockquote or using CSS to add a little functionality. Here’s my demo page. Take a look at it to see what I’m talking about.

Number one is a practical use of content: and :after. Since using cite in a blockquote doesn’t actually make anything appear on your page, let’s add some CSS to do it for us. So you’re blockquote starts like this:
<blockquote cite="http://lipsum.com">
and the css looks like this
blockquote:after{content: " (" attr(cite) ")";display:block;}
This will just make your cite appear after the blockquote in parenthesis.

If you’d like to try it a different way, check out number two. This method will highlight the blockquote upon hover and then show your cite.

blockquote:hover{background:#FFF394;}
blockquote:hover:after{content: " (" attr(cite) ")";display:block;font-size:10px;}

Number three is just a little use of padding, border, and background color to make your blockquotes stand out: blockquote{padding:10px;background:#FFF394;border:1px dashed #8F5656;}

Number four again makes use of content to add quotes, without modifying the blockquote at all. So your blockquote can look like this
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</blockquote>
and your CSS can add the open and close quotes.

blockquote{line-height:17px;}
blockquote:before{content:open-quote;font-family:georgia;font-size:20px;}
blockquote:after{content:close-quote;font-family:georgia;font-size:20px;}

Notice I’ve adjusted the line-height so larger quotes don’t throw off the top and bottom lines of the blockquote. Also try a typeface like Georgia for some stylish quotes.

Number five is very similar to the way I style my blockquotes on pixelspread. Just a simple background image of an open quote
blockquote{background:url("quotebg.png") no-repeat;padding:5px 0px 0px 30px;margin:10px;}
Be sure to adjust the padding, so your quote isn’t overlapping your background.

Number six achieves the look as number five, but without the use of an image. The benefit being that no image needs to load, but you will have to add an open quote within your blockquote.
<blockquote><span>&#147;</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</blockquote>

blockquote{position:relative;margin:10px;padding:5px 0px 0px 30px;}
blockquote span{position:absolute;top:0px;left:8px;font-family:georgia;font-size:50px;}