Fri. March 27, 3:05:15 PM
Cool beans! But I think it only works in Firefox (not IE or Chrome), from my quick tests anyways.
Thanks, and good luck with life, my friend.
Create CSS Curly Quotes Without Images
Recent Articles:
- Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
- Tracking Internal Website Campaigns With Google Analytics and PHP
- Everything You Need to Know About jQuery's .data() Method
- Google vs. China: How It Will Affect Web Workers
- Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
Subscribe To Feed
Subscribers
Subscribers
Oct 01
The objective of most web designers is to separate content from markup. It is also an objective to not use images when possible, simply for the fact that you have to edit the images in external software if you want to modify the look and feel them. Remember, if you can do it in CSS then do it in CSS. Below I will show you how to create CSS quotes without the need of images. The code is also pretty pure without the use of extra nested tags or classes.
Setting Up Your CSS Quotes
First, lets use the blockquote tag, because it is the most semantic choice when dealing with quotations. Also I should note that support for the Q element is not there yet in Internet Explorer so we will avoid that tag for now. The margin used, gives the blockquote some spacing much like a paragraph tag would, while the padding left offsets the content from our left quote.
blockquote
{
margin: 2em 0px;
padding-left: 40px;
}
Styling Our CSS Curly Quotes
Now we use the :before pseudo selector to place our CSS content. I changed the color, font family and gave it a negative margin which is the reverse of the padding we gave to the blockquote element. Next we use the HTML entity '201C' which will render as a quotation mark. We have to use this to get it working in Safari and Google Chrome.
blockquote:before
{
color: #990000;
content: '201C'; /* http://monc.se/kitchen/129/rendering-quotes-with-css */
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
}
Putting It All Together
blockquote
{
margin: 2em 0px;
padding-left: 40px;
}
blockquote:before
{
color: #990000;
content: '201C'; /* http://monc.se/kitchen/129/rendering-quotes-with-css */
font-family: Arial, Helvetica, sans-serif;
font-size: 6em;
font-weight: bold;
line-height: 0px;
margin: 0px 5px 0px -40px;
vertical-align: bottom;
}
Click to view a demo of CSS curly quotes
Sources:
Replies:
-
Sat. March 28, 12:03:24 AM
Hi Steve, sorry about that, I've been meaning to update this article since I originally wrote it. I found a way to get it working in Safari and Google Chrome. I updated the article tonight with the proper CSS.
-
Tue. January 5, 2:42:21 PM
I had to add an backslash, to get it work:
content: '\201C'
-
Sun. May 2, 10:44:31 PM
Thanks for that tip Trond. For some reason, it wouldn't work for me either until I added that backslash. I'll have to test this in the other browsers now.
-
Tue. May 4, 6:09:12 AM
I also had to add the backslash to get it working. I would also like to point out that the codes are Unicode character codes (not HTML codes) and the closing quote (if you use blockquote:after) should be '\201D'.
-
Mon. July 12, 5:59:07 AM
Glad I stumbled upon this post! I was using
{content:open-quote;} which worked in IE and Firefox but not in Safari or Chrome. Substituting with '\201C' worked a charm. Thanks!
-
Sat. July 31, 1:14:45 PM