Thursday, February 19, 2009

sudo append quotes

Today, I was trying to design some simple tabs (which, may be, I'll post later). So while searching for something, I found this concept in CSS called pseudo-elements, which made my previous solution for drawing quotes ridiculously long..

So basically, as the name suggests, pseudo elements are not exactly present in the markup, but we can still attach css properties to those elements.
for example, we can attach different properties to -
  • First letter of the node
  • First line of the block node
  • Pseudo element before actual node
  • Pseudo element after actual node
Making use of :before and :after pseudo-elements, I can write 2 short lines n boom... Its done...

/* CSS code for blockquote */
blockquote:before {content: url(start_quote_image_url)}
blockquote:after {content: url(end_quote_image_url)}

Please Note:
Html contents must be inline to work properly.
And of course, as usual, this doesn't work in IE6/7. The good news is – they are supporting it in IE8 beta.

1 comment: