Pure CSS Blockquote Styling

Ever since the days of print, it has been common to style quotations and cover blurbs with oversized quotation marks floating along the left side. The practice is alive and well in the internet age, though the technique usually used is a background image.

It’s 2012, already! Why are we still relying on pictures of typographical symbols? Let’s do it with the power of CSS!

Let’s start with some simple HTML. Before we can style anything, we need to create our blockquote. While we’re at it, a cite element is a nice, semantic way to attribute the quote to its originator.

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>

Now some CSS to provide some basic styling for the blockquote. Leaving the default browser style isn’t going to look great, so we’ll use a largish serif font with a little extra line spacing. And a slightly lighter color. Extra-dark grey adds a subtle variation from your main body text.

blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}

Now for the fun part: the giant quotation mark. The :before pseudo-element can be used to dynamically insert content before the text of the element, and style the content you insert. This is great for decorative text, like stylistic curly-quotes. The trick is to use an escaped hexadecimal representation of the desired character, and a little bit of fiddly positioning stuff to make it sit in the right position.

blockquote:before {
display: block;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}

That’s the most difficult part. You may have to experiment with the size and positioning until it looks right, though. Once everything looks nice, you can apply the same technique to style the citation. Using the :before pseudo-element, you can insert an em dash and a space before the text.

blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}

blockquote cite:before {
content: "\2014 \2009";
}

Easy, isn’t it? The effect should work in all modern browsers, and IE8. (IE8 will only process the pseudo-element if your document has a doctype declared, but you should have one of those already…) In browsers that don’t support it, the added content simply won’t appear, leaving the main text of the blockquote (and the citation) intact. The other styling will remain, of course, so it should still look good enough.

You can see a live demo here.

  • steve

    Thanks!

  • Skye

    Awesome, thank you.

  • Julio

    Thank you so much Matt, easy, simple and beautiful!

  • http://www.flapane.com/ flapane

    Thanks a lot, I was just looking for a better CSS blockquote styling than mine.

  • http://optimwise.com Chad Warner

    Thanks for the detailed post. I just followed it to restyle blockquotes on a couple WordPress themes (child themes of Twenty Twelve and Startbox). You may already be aware of this, but there’s disagreement about whether the cite element can be used to mark up a person’s name in HTML5 (html5doctor.com).

    • http://www.webmaster-source.com Matt

      I’m in the “screw you, W3C” camp. It’s perfectly reasonable to cite a person rather than a work, and in fact, many quotations are not a part of a published work.

      The whole HTML5 spec is a regressive trainwreck, anyway, sadly. You have the cite controversy, the weird back-and-forth over the time element, the return of the previously deprecated i and b with strange new pseudo-semanticisms attached, and increasingly lax standards in the markup department. (I hate seeing self-closing elements without slashes and unquoted attributes.)

  • Webbnos

    Thanks for this, it looks great.

  • Ken Hung

    It’s really helps!! Awesome!

  • http://www.sizofrenpusula.com yusuf

    thanks,i will use it ;)

  • http://practicalunittesting.com Tomek Kaczanowski

    Thank you, works great, will use it on my website!

  • http://tinhcha.org Bao Dinh

    Very nice, thanks for sharing

  • http://limeblast.co.uk/ Daniel Hollands

    I used this on two different projects this weekend – thank you :)

  • Anonymous

    The use of character data inside blockquote and cite elements isn’t allowed.

  • http://www.theinternetguys.com.au Andrew

    Thank you. Very helpful!

    It’s nice to take advantage of CSS, rather than using images unnecessarily. If only Microsoft kept up and forced Internet Explorer updates.

  • http://catatanbelajar.com/ Catatan Belajar

    Thank you very much, this nice not use image.

  • http://www.i-labeling.com Richard Hill

    This is so close, but is there any way of adding a close quotation and then adding the citation after the closing quotes?

  • http://www.mkoseoglu.com Mert Köseoğlu

    Thank you very much!

  • http://biellsoft.blogspot.com Muhammad Abdurrahman

    Thank you very much sir, it’s simple but wonderful ^_^

  • http://www.ishoutnet.com Arafin Shaon

    Add the snippet into my style sheet but not being re-sized when resizing my browser :(

    By the way thanks.

  • http://www.vswebdesigns.com/ Joe Manier

    Upped the padding and added a light grey background on the blockquote for some contrast. Couldn’t have put something together so quick without the the help though, thanks a ton!