A little dab'll do ya
Code Snippets
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.
the only thing i would like for this would be a closing quote at the end.
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?
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 :)