Thursday, 22 August 2013

Easiest Blockquote Quotation Marks CSS


Here’s our blockquote code:
1
2
3
4
<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;
}







No comments:

Post a Comment