Advanced Search

CSS Curly Quotes

/ Published in: CSS
Save to your folder(s)
<p>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 < span > 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.</p>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!-- THE HTML -->
  2.  
  3. <blockquote>
  4. <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>
  5. </blockquote>
  6.  
  7. /* THE CSS */
  8.  
  9. blockquote {
  10. display: block;
  11. padding: 0 60px;
  12. width: 350px;
  13. }
  14.  
  15. blockquote:before, blockquote:after {
  16. color: #69c;
  17. display: block;
  18. font-size: 700%;
  19. width: 50px;
  20. }
  21.  
  22. blockquote:before {
  23. content: open-quote;
  24. height: 0;
  25. margin-left: -0.55em;
  26. }
  27.  
  28. blockquote:after {
  29. content: close-quote;
  30. height: 50px;
  31. margin-top: -70px;
  32. margin-left: 360px;
  33. }

URL: http://www.designmeme.com/articles/csscurlyquotes/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.