Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Is there a simple way to pull off this style of quotes in HTML/CSS without having to resort to images or things like absolute positioning? It seems every time I look away something new and awesome is added to HTML/CSS, so I just wondered if this type of thing might be possible? :)

See image:

enter image description here

share|improve this question
up vote 4 down vote accepted

It is indeed possible without using images. One approach introduces additional markup besides a simple <blockquote> and another uses the :before and :after pseudo selectors to add the quotes. The quotes themselves are just blown up text and styled with CSS. So yes images aren't required, but they end up being easier to implement and more widely supported. The pseudo selectors don't have support in IE6 or IE7, but it's up to you if you want to support them.


share|improve this answer
Cool. Have you got a link to the first approach, too? – Django Reinhardt May 9 '11 at 17:56
Nevermind, I got it working. This one worked perfectly: 24ways.org/2005/swooshy-curly-quotes-without-images Thanks! – Django Reinhardt May 9 '11 at 18:18
The author of that post linked this one: 24ways.org/2005/swooshy-curly-quotes-without-images. Beat me by seconds :) – Andrew Charlton May 9 '11 at 18:20

You need the quote image, put it in the background of a div and set a first line margin.

You are going to need to use an image.

share|improve this answer
Thanks for your answer, but there's another quote on the end of the text, too. I should have included it in the image. – Django Reinhardt May 9 '11 at 17:33

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.