Geek Out! - WordPress tips, XHTML/CSS illumination, and adventures in jQuery

Styling Blockquotes with Psuedo classes

Ok, so a few years ago I was fairly new to working with CSS and XHTML, and found it really frustrating that I couldn’t use two background images  to place quote images before and after a blockquote with CSS. Well, you still can’t do it with the “background” selector, but you can make a neat effect using the psuedo classes :before and :after.

Works in: Safari, Firefox, IE8

Doesn’t work in IE6, IE7. Degrades gracefully in both.

Let’s start with the blockquote

Now, as mentioned above, this style won’t work in IE7, which is commonly used, so we need to use a base styling for the blockquotes. Seen below:

blockquote {
 background:#F5F5F5 none repeat scroll 0 0;
 border-left:8px solid #CCCCCC;
 border-right:1px dotted #CCCCCC;
 font-family:georgia,serif;
 margin-bottom:12px;
 margin-left:10px;
 margin-right:10px;
 padding:12px;
}

So, now we have a nice looking blockquote styling that looks like this:

Now let’s bring out the big guns (so to speak)

Now we’ll use the :before and :after psuedo classes to add the open and close quotes to the blockquotes.

blockquote p:before {
 content:url(images/quote-left.gif);
 margin-right:10px;
 text-align:left;
 opacity:0.3;
}

And, the :after psuedo class:

blockquote p:after {
 content:url(images/quote-right.gif);
 display:block;
 margin-top:-16px;
 text-align:right;
 opacity:0.3;
}

Now you have something that looks like this:

That’s it, all done. Hope that was helpful.

Also, If you want the quote .gifs I used, download them here.

ED: I used “opacity” here to fade the image to 30% opacity, but this isn’t recognized properly in IE, so if I wanted to do it right, I’d need to save the original file at 30% black, in order to make it look the same in all browsers. I’ll do that later though. I’m feeling lazy today.