Code Snippet

Home » Code Snippets » CSS » Simple and Nice Blockquote Styling

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:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.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.

Reference URL

Subscribe to The Thread

  1. Dyllon

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

    Reply ↓
  2. Dyllon

    scratch that..

    Reply ↓
  3. Jared

    What will this look like?

    Reply ↓
  4. Dan Sensecall

    Thanks very much for this!

    Reply ↓
  5. Nipperkin

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

    Reply ↓
  6. Dez

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

    Reply ↓
  7. Dez

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

    blockquote:before {

    content:”\201C”;

    }

    blockquote:after {

    content:”\201D”;

    }

    Reply ↓
  8. Wolf

    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?

    Reply ↓
    • Efrain

      Having the same issue. How can I fix this?

      Thanks

  9. kathy

    what would the
    code for the closing quote be?

    Reply ↓
  10. kathy

    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 :)

    Reply ↓
  11. kathy

    ‘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 :)

    Reply ↓
  12. Charlie

    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?

    Reply ↓
  13. Brad Czerniak

    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;}
    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~