Easiest Blockquote Quotation Marks CSS

Blockquote quotation marks styling can be tricky. Here’s a simple example on how to add simple quotes to a paragraph of quoted text. IE7 degrades graciously 🙂

Here’s how it gonna look in all browsers, except IE7. IE7 will just not have any quotes.

Styled blockquote

Here’s our blockquote code:

<blockquote>
	<p class="says">I went to a bathhouse last Saturday (after all, I cannot go to America for a bath). They handed me two checks. One for my underwear, the other for my coat and hat. But where is a naked man to put those checks? Honestly, there is no place for them. You have no pockets. All you have is a belly and legs.</p>
	<p> - Mikhail Zoschenko - Nervous People and other stories</p>
</blockquote>

And here’s its CSS:

blockquote {
	font-style: normal;
	background:#ccd7dd;
	padding:24px 40px 16px 25px;
	line-height:24px;
}

blockquote p {
	font-size:14px;
	text-align:right;
	padding:0;
	color: #134977;
    display:block;
}

blockquote p.says {
	font-size:16px;
	text-align:left;
	padding:0 0 10px 20px;
	position:relative;
}

blockquote p.says:before, blockquote p.says:after {
	content: '”';
	font-size: 32px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color: #134977;
	font-weight:bold;
	vertical-align:top;
	line-height:0.8
}

blockquote p.says:before {
	content: '“';
	position:absolute;
	left:0;
	top:-2px;
}