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.
the only thing i would like for this would be a closing quote at the end.
You can do blockquote:after…
Here you have a closing quote in the end https://css-tricks.com/examples/Blockquotes/
scratch that..
What will this look like?
Thanks very much for this!
Personally, I think that the use of the vertical line *and* the quotation mark is redundant, since they both signify the same thing.
This doesn’t seem to work in chrome/safari.
… If you want it to work in Safari/Chrome.
blockquote:before {
content:”\201C”;
}
blockquote:after {
content:”\201D”;
}
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?
Having the same issue. How can I fix this?
Thanks
Yep, had this same issue. I tried what the dude said in the above comment. It fixes the problem!
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
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
what would the
code for the closing quote be?
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 :)
‘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 :)
What’s the:
for on blockquote?
You don’t seem to need it if you specify \201C and \201D on :before and :after.
Am I missing something?
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:
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.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).
Brad, this update works great in Safari, but not at all in Chrome and Firefox.
Is there any way to get this styling to display in those browsers?
Thanks!
This doesn’t seem to work in chrome.
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;
}
Hi,
How to add a box shadow ?
Thanks
https://css-tricks.com/snippets/css/css-box-shadow/ – check this :)
Pretty easy and cool! Thanks Chris!
Thanks man, it helped me alot :)
Anyone know how to modify the css so that there is a space between paragraphs in a block quote? Thanks for any help.
blockquote p{
margin:15px 0;
}
Solved the ‘no space between multiple paragraphs ‘ problem with:
Pretty style!
The demo page is a dead link!
@css-trick @David Darnes
Nice one.
Greetings – some modifications to the code that makes it work for me :-)
The important bits – I have padding on both sides. Setting the
blockquote
element toposition:relative
means you can set theblockquote:before`` and blockquote:after
toposition:absolute
, and then position the quote to usingleft
,right
,bottom
andtop
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!
Nice and clean! You’ve just missed a colon (:) here:
blockquote p {
display: inline;
}
thx
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
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.
You could style blockquotes to appear in italics, like this:
blockquote {
font-style: italic;
}
What is the
blockquote:before
for?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.
See how they turned out on http://meetkarissa.com/sleepphones .
Have you tried selecting the text in that example in Chrome?
Thank you for this tutorial! It’s just what I need.
How can I make the commas bigger?
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
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;
}
Unfortunately this isn’t working in Internet Explorer.
Try this – Have tested it in most browsers and doesn’t break them, just little aesthetic tweaks required:
Works perfect! Thanks!
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;
No need to use !important – this should only be used in rare cases.
Also ‘none’ is not a valid value of the font-family property. http://www.w3schools.com/cssref/pr_font_font-family.asp
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:
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!
How do I remove the vertical line?
Brittney, try to remove this line: border-left: 10px solid #ccc;
Very lovely – and works. Thank you!
So useful CSS design. Thanks.
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.
Can anyone give me Nice looking Blockquote style? Because I don’t know about code……
How can we shape/create our own open quotes?
If you do not want a close quote, but also don’t want the browser to switch from double opening quote to single opening quote because it’s thinking you’re within an opened blockquote block e.g. for subsequent blockquotes you can turn them off without visually displaying with:
Very helpful tip and guide. Thank you for sharing!