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.
