pf » Styling Blockquotes with CSS Psudo Elements

November 09, 2006

Styling Blockquotes with CSS Psudo Elements

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.

Permalink | Add Comment |

add to del.icio.us | Tags: css, blockquote, psudo, style, before, after

1 person found this page useful, what do you think?

Trackbacks

Trackback Address: 597/B4158D2B923C85DFFFA0F3ED08A096EB

Comments

On 11/09/2006 at 12:59:34 PM MST Peter Tilbrook wrote:

It doesn't work under IE7. I just tried it.

On 11/09/2006 at 7:42:38 PM MST williamhaun.com wrote:

Unfortunately, it isn't working in IE7. Surprised anyone?

On 11/09/2006 at 11:27:19 PM MST Peter Tilbrook wrote:

Surprised? No. Disappointed? No. I only use IE for the updates - long live Firefox (et al).

On 11/10/2006 at 9:12:45 AM MST Kevin wrote:

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.

On 11/12/2006 at 1:13:59 PM MST illovich wrote:

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 =)

On 11/12/2006 at 1:15:13 PM MST illovich wrote:

Bah, the effect is this:

" blockquote "

On 11/12/2006 at 7:39:46 PM MST Pete Freitag wrote:

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.

On 11/14/2006 at 3:47:22 PM MST CC wrote:

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.