Styling Blockquotes with CSS Psudo Elements
Published on November 09, 2006
By Pete Freitag
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
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.
Styling Blockquotes with CSS Psudo Elements was first published on November 09, 2006.
Discuss / Follow me on Twitter ↯
Tweet Follow @pfreitagComments
Bah, the effect is this:
"
blockquote
"
=P
"
blockquote
"
=P
by illovich on 11/12/2006 at 1:15:13 PM UTC
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.
So make that two surprises for me.
by Pete Freitag on 11/12/2006 at 7:39:46 PM UTC
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 =)