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

It doesn't work under IE7. I just tried it.
Unfortunately, it isn't working in IE7. Surprised anyone?
Surprised? No. Disappointed? No. I only use IE for the updates - long live Firefox (et al).
I'm surprised and disappointed. I would have expexted it to work in IE7. Its fine with me if people only use IE to test in and use Firefox for their normal browsing but that doesn't make this something we can use. If it doesn't work in IE you need to mannually add the quotes which means you can't use the nice psudo elements that firefox has managed how to figure out.
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.
I don't know about IE7, but you can get them to work under Safari if instead of using 'open-quote' and 'close-quote', you define the quote marks directly like so: blockquote:before { content: '\201C'; } blockquote:after { content: '\201D'; } ...but the margin/padding issue that places spacing between the quote and the quote marks appears to still be an issue.

Post a Comment




  



Spell Checker by Foundeo

Recent Entries



foundeo


did you hack my cf?