Simple and Nice Blockquote Styling

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.
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.

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

Example

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Comments

  1. User Avatar
    Dyllon
    Permalink to comment#

    the only thing i would like for this would be a closing quote at the end.

  2. User Avatar
    Dyllon
    Permalink to comment#

    scratch that..

  3. User Avatar
    Jared
    Permalink to comment#

    What will this look like?

  4. User Avatar
    Dan Sensecall
    Permalink to comment#

    Thanks very much for this!

  5. User Avatar
    Nipperkin
    Permalink to comment#

    Personally, I think that the use of the vertical line *and* the quotation mark is redundant, since they both signify the same thing.

  6. User Avatar
    Dez
    Permalink to comment#

    This doesn’t seem to work in chrome/safari.

  7. User Avatar
    Dez
    Permalink to comment#

    … If you want it to work in Safari/Chrome.

    blockquote:before {

    content:”\201C”;

    }

    blockquote:after {

    content:”\201D”;

    }

  8. User Avatar
    Wolf
    Permalink to comment#

    Using multiple blockquotes one after another seems to result in the first instance having a double quote before but every subsequent instance having only a single quote before (in Firefox). Why would this be?

    • User Avatar
      Efrain
      Permalink to comment#

      Having the same issue. How can I fix this?

      Thanks

    • User Avatar
      Ivan
      Permalink to comment#

      Yep, had this same issue. I tried what the dude said in the above comment. It fixes the problem!

    • User Avatar
      Andrew
      Permalink to comment#

      It looks like it’s because of the 3rd & 4th parameters in the quote attribute.
      From: http://www.w3schools.com/cssref/pr_gen_quotes.asp

      quote: string string string string
      Specifies which quotation marks to use. The first two values specifies the first level of quotation embedding, the next two values specifies the next level of quote embedding, etc

      Hence if you’re not closing quotes it’ll use the 3rd parameter.

      I changed it to quotes: "\201C""\201D"; and it fixed it for me.

      Cheers

  9. User Avatar
    kathy
    Permalink to comment#

    what would the
    code for the closing quote be?

  10. User Avatar
    kathy
    Permalink to comment#

    sorted

    blockquote:after {color:#B2AFCD;content:close-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;}

    just gotta paly with the spac a bit :)

  11. User Avatar
    kathy
    Permalink to comment#

    ‘Scuse my appalling spelling!

    final

    blockquote:after {color:#B2AFCD;content:close-quote;font-size:4em;line-height:.1em;margin-left: .20em;vertical-align:-.4em;}

    Thanks for great tips Chris :)

  12. User Avatar
    Charlie
    Permalink to comment#

    What’s the:

    quotes:"\201C""\201D""\2018""\2019";

    for on blockquote?
    You don’t seem to need it if you specify \201C and \201D on :before and :after.

    Am I missing something?

  13. User Avatar
    Brad Czerniak
    Permalink to comment#

    Hey all, as the original snippet submitter, I just wanted to follow up and address some of the weaknesses mentioned in the comments. Here is some css that I think is an improvement:

    
    blockquote{background:#f9f9f9;border-left:1em solid #eee;margin:1.5em 1em;padding:.5em 1em;quotes:"\201C""\201D";}
           blockquote:before{color:#808080;content:open-quote;font-size:4em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;}
           blockquote :first-child{display:inline;}
           blockquote :last-child{margin-bottom:0;}
    
    • User Avatar
      Ren

      I was gonna mentioned some of the same changes as you (i.e. the first and last child), Brad, but then I noticed your comment. Good calls. I’d just add that it might be a good idea to set the :first-child to inline-block to preserve the bottom margin.

    • User Avatar
      Emnem

      Inline blocking makes the opening quote display above and to the left of the first line. Kind of seeking an answer to this myself, since preserving inline styling on a multi-paragraph quote (without amending it to inline-block) makes the first paragraph lay right on top of the next one. Very funky positioning issues (at least in Fx32/33 Nightly).

  14. User Avatar
    jenn
    Permalink to comment#

    This doesn’t seem to work in chrome.

  15. User Avatar
    David Darnes
    Permalink to comment#

    Very useful reference! If anyone is wondering why only their first blockquote has the double quote marks but the following ones don’t, you just need to add:

    blockquote:after {
    content: no-close-quote;
    }

  16. User Avatar
    Voytek
    Permalink to comment#

    Hi,

    How to add a box shadow ?
    Thanks

  17. User Avatar
    Praveen Puglia
    Permalink to comment#

    Pretty easy and cool! Thanks Chris!

  18. User Avatar
    Mesaber
    Permalink to comment#

    Thanks man, it helped me alot :)

  19. User Avatar
    Derek

    Anyone know how to modify the css so that there is a space between paragraphs in a block quote? Thanks for any help.

  20. User Avatar
    WindyLiu
    Permalink to comment#

    Pretty style!

  21. User Avatar
    Eric B
    Permalink to comment#

    The demo page is a dead link!

  22. User Avatar
    Sudeep B
    Permalink to comment#

    @css-trick @David Darnes

    Nice one.

  23. User Avatar
    Don
    Permalink to comment#

    Greetings – some modifications to the code that makes it work for me :-)

    blockquote {
      margin: 1.5em 0 1.5em;
      padding: 0 1em 0 2.5em;
      position:relative;
    }
    blockquote:before
     {
      color: #ccc;
      content: "\201C";
      font-size: 5em;
      position:absolute;
      left:5px;
      top: 0.3em;
      line-height: 0.1em;
    }
    
    blockquote:after
     {
       color: #ccc;
      content: "\201D";
      font-size: 5em;
      position:absolute;
      right:3px;
      bottom: 0em;
      line-height: 0.1em;
    }
    

    The important bits – I have padding on both sides. Setting the blockquote element to position:relative means you can set the blockquote:before`` and blockquote:after to position:absolute, and then position the quote to using left, right, bottom and top

    • User Avatar
      Rick
      Permalink to comment#

      Don, the text was overlapping the end quotation symbols on the right (FF v25).

      Changing the right-side padding from 1em to 2.5em fixes it.

      padding: 0 2.5em 0 2.5em

      Thanks everyone for this!

  24. User Avatar
    Daniel
    Permalink to comment#

    Nice and clean! You’ve just missed a colon (:) here:
    blockquote p {
    display: inline;
    }

  25. User Avatar
    Jacky Liang
    Permalink to comment#

    For the before element, the vertical-align prevented text from being selected. It took me a while to get rid of the bug, but I think it works now.

    display:inline-block;color:#FFF;height:25px;font-size:2.8em;line-height:80px;content:'\201F';letter-spacing:-2px;float:left;position:relative;right:8px

  26. User Avatar
    Steven Fromm
    Permalink to comment#

    Is there a simpler way to make quotes attractive if you do not really understand the above CSS stuff. I fear it is beyond me.

    • User Avatar
      Torsten
      Permalink to comment#

      You could style blockquotes to appear in italics, like this:

      blockquote {
      font-style: italic;
      }

  27. User Avatar
    Abhimanyu
    Permalink to comment#

    What is the blockquote:before for?

  28. User Avatar
    Karissa
    Permalink to comment#

    Thanks! I learned what I needed in the comments. It’s always bothered be that there was only the first quote and not two.

    I tweeked one of the above a little more and added purple to it.

    blockquote {
        background-color: #9786c6;
        border-left: 1em solid #5236a0;
        margin: 1.5em 0 1.5em;
        padding: 1em 1.5em 0 2.5em;
        position: relative;
    }
    blockquote:before {
      color: #392570;
      content: "\201C";
      font-size: 5em;
      position:absolute;
      left:5px;
      top: 0.6em;
      line-height: 0.1em;
    }
    
    blockquote:after {
       color: #392570;
      content: "\201D";
      font-size: 5em;
      position:absolute;
      right:3px;
      bottom: 0em;
      line-height: 0.1em;
    }      
    
    

    See how they turned out on http://meetkarissa.com/sleepphones .

  29. User Avatar
    bob
    Permalink to comment#

    Have you tried selecting the text in that example in Chrome?

  30. User Avatar
    Noemi
    Permalink to comment#

    Thank you for this tutorial! It’s just what I need.
    How can I make the commas bigger?

  31. User Avatar
    Uday Khandelwal

    I have a doubt from the first post, I can’t get my text to be displayed inline.
    is blockquote p{
    display : inline;
    }

    for the

    text in the HTML.

    My HTML code is like

    “We are what we repeatedly do. Excellence, then, is not an act, but a habit.”- Aristotle

  32. User Avatar
    Pawan
    Permalink to comment#

    Hello guys,

    Check this..

    Simple and Superb……..

    .tmls_text:after {
    color: #ccc;
    content: close-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-left: 0.25em;
    vertical-align: -0.4em;
    }

  33. User Avatar
    One9ooh6
    Permalink to comment#

    Unfortunately this isn’t working in Internet Explorer.

  34. User Avatar
    aj
    Permalink to comment#

    Try this – Have tested it in most browsers and doesn’t break them, just little aesthetic tweaks required:

    blockquote {
      background: #f5f5f5;
      font-size: 1em;
      border-left: .7em solid #ccc;
      margin: 1em .5em;
      padding: .1em 1em;
      line-height: 1.2em;
      quotes: "\201C""\201D";
    }
    
    blockquote:before {
      font: Georgia;
      color: #808080;
      content: open-quote;
      font-size: 4em;
      line-height: 0;
      vertical-align: -.41em;
      padding: 0 .1em 0 .1em;
      }
    
    blockquote:after {
      font: Georgia;
      color: #808080;
      content: close-quote;
      font-size: 4em;
      line-height: 0.3em;
      margin-right: 0.25em;
      vertical-align: -0.57em;
      padding: 0 0 0 .1em
    }
    
    blockquote:first-child {
      display: absolute;
      padding-top: 1.3em;
    }
    
    blockquote:last-child {
      display: absolute;
     }
    
  35. User Avatar
    Reza
    Permalink to comment#

    If it doesn’t work for you, you probably need to change the font. Just use another one or simply remove it like this: font-family: none !important;

  36. User Avatar
    drmyersii
    Permalink to comment#

    Hey Chris. Just wanted to let you know that there’s a small issue with the way you are displaying double block quotes. If you want to ensure that proceeding block quotes aren’t set to a single quote, you’ll have to add the following:

    blockquote:after
    {
        content: no-close-quote;
    }
    

    This will ensure that the block quote is still functioning as intended, but it won’t affect following block quotes. Thanks for the awesome article, and I hope you can update it with this info!

  37. User Avatar
    Brittney

    How do I remove the vertical line?

    • User Avatar
      Reza

      Brittney, try to remove this line: border-left: 10px solid #ccc;

  38. User Avatar
    Susan Taunton
    Permalink to comment#

    Very lovely – and works. Thank you!

  39. User Avatar
    Sezer
    Permalink to comment#

    So useful CSS design. Thanks.

  40. User Avatar
    Astrid
    Permalink to comment#

    Hello,

    I’m trying to get the closing quotes to appear BEFORE the text within the ‘cite’ mark-up. I’m struggling, any help or pointers would be massively appreciated.

    Using positioning as I do isn’t good enough because the positioning is calculated from the bottom of the blockquote (where blockquote = text of quote + cite), which means that, when the text within the ‘cite’ markup is long and the screen on which the quote is displayed is narrow, then the bottom quotes appear to the right of the text within the ‘cite’ markup, instead of above it (and to the bottom right of the quote itself).

    I’ve tried the code above as is, and it doesn’t work for me.
    My code is currently as follows:

    blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
    }
    blockquote p:first-child:before, blockquote p:first-child:after {
    display: block;
    font-size: 80px;
    position: absolute;
    color: #7a7a7a;
    }
    blockquote p:first-child:before {
    content: "\201C";
    left: -7px;
    top: -25px;
    }
    blockquote p:first-child:after {
    content: "\201D";
    right: 10px;
    bottom: -10px;
    }
    blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
    text-align: right;
    }
    blockquote cite:before {
    content: "\2014 \2009";
    }

    Many thanks in advance for your thoughts.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag