Posted By

JimSangwine on 05/05/11


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

sethmbruce


Simple and Nice Blockquote Styling


 / Published in: CSS
 

  1. /* The blockquote displays in standards-compliant browsers with the "big quotes before" effect, and in IE with a thick left border and a light grey background.
  2. Unlike other blockquote techniques, this style does not require a nested block-level element (like p). As such, it turns a paragraph into an inline-styled element to keep the content from dropping below the quote. */
  3.  
  4. blockquote {
  5. background:#f9f9f9;
  6. border-left:10px solid #ccc;
  7. margin:1.5em 10px;
  8. padding:.5em 10px;
  9. quotes:"\201C""\201D""\2018""\2019";
  10. }
  11. blockquote:before {
  12. color:#ccc;
  13. content:open-quote;
  14. font-size:4em;
  15. line-height:.1em;
  16. margin-right:.25em;
  17. vertical-align:-.4em;
  18. }
  19. blockquote p {
  20. display:inline;
  21. }
  22.  

Report this snippet  

You need to login to post a comment.