Creating Curly Quotes with CSS

Simon Collison recently explained how to create Swooshy Curly Quotes Without Images using CSS. It’s a nice technique that works cross-browser, but you have to add tags to your markup for it to work. Here is an alternate technique that requires no changes to your markup that will work in modern CSS2 compatible browsers like Firefox.

The HTML

We’ll start with some regular markup for our quote. Nothing fancy here.


<blockquote>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus dignissim, purus a blandit cursus, nulla erat cursus mauris, a dignissim est ante et arcu. Vivamus sollicitudin porttitor justo. Nunc at leo quis arcu ultrices placerat. Quisque eget justo at nisi tempus vehicula. Nullam a odio eu orci sodales varius. </p>


</blockquote>

The CSS

We’re going to be setting a width for the blockquote and leave some padding that the quotes will be positioned into.

blockquote {
display: block;
padding: 0 60px;
width: 350px;
}

Next we’ll use the CSS :before and :after pseudo-elements to generate the curly quotes. Since we’re setting the quotes to use display: block, we’ll need to set widths for them as well. We’ll define the common attributes first…

blockquote:before, blockquote:after {
color: #69c;
display: block;
font-size: 700%;
width: 50px;
}

Next we’ll define the specific attributes for the opening and closing quotes. We’ll control the position of the quotes with the margin attributes, and in the case of the opening quote—the height.

blockquote:before {
content: open-quote;
height: 0;
margin-left: -0.55em;
}

blockquote:after {
content: close-quote;
height: 50px;
margin-top: -70px;
margin-left: 360px;
}

Note: You may need to adjust the margins depending on the typeface you’re using and the width you’ve set for your blockquote.

The Curly Quotes

Here we have the curly quotes on our blockquote elements created using only CSS and without editing any of our markup. How nice.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus dignissim, purus a blandit cursus, nulla erat cursus mauris, a dignissim est ante et arcu. Vivamus sollicitudin porttitor justo. Nunc at leo quis arcu ultrices placerat. Quisque eget justo at nisi tempus vehicula. Nullam a odio eu orci sodales varius.