CSS Blockquotes "How To" Tutorial
I highlighted three ways to css blockquotes. Two using no images and :before/:after, and the other using images with "b" as a hook. The "b" as the hook one works in IE7+ and the ":before/:after" one works in IE8+. You can mix and match any of these demos rules together (FYI images w/ :before/:after instead etc) if you prefered to code it differently.
CSS
blockquote {
width:450px;
quotes:"\201C" "\201D";
}
blockquote:before, blockquote:after {
font:bold 45px/1px Times, serif;
color:#359800;
position:absolute;
}
blockquote:before {
content:open-quote;
margin:15px 0 0 -25px;
}
blockquote:after {
content:close-quote;
margin:23px 0 0;
}
HTML
<blockquote></blockquote>
CSS
blockquote {
width:450px;
}
blockquote b {
display:inline-block;
width:18px;
height:13px;
margin-right:5px;
vertical-align:top;
background:url(/images/quotationmark1.jpg) no-repeat;
}
blockquote b + b {
margin-left:2px;
vertical-align:bottom;
background:url(/images/quotationmark2.jpg) no-repeat;
}
HTML
<blockquote><b></b><b></b></blockquote>View Demo
CSS
blockquote {
width:450px;
quotes:"\201C" "\201D";
}
blockquote:before, blockquote:after {
font:bold 45px/1px Times, serif;
color:#359800;
display:inline-block;
vertical-align:bottom;
}
blockquote:before {
content:open-quote;
margin:0 2px 4px -2px;
}
blockquote:after {
content:close-quote;
margin:0 0 -4px;
}
HTML
<blockquote></blockquote>
