CSS Cookbook

10.8. Emphasizing a Quotation

Problem

You want to add emphasis to a quotation by large and bold quotation marks as shown in Figure 10-20.

Figure 10-20. The stylized quotation

Solution

First code the markup for the quotation (see Figure 10-21):

<blockquote>
 <p>There is a tendency for things to right themselves.</p>
 <cite>Ralph Waldo Emerson</cite>
</blockquote>

Figure 10-21. Quotation as it would normally appear

Then apply CSS rules to stylize the quote:

blockquote {
 padding: 0;
 margin: 0;
 text-align: center;
}
p {
 font-size: 1em;
 padding-bottom: 3em;
 text-transform: lowercase;
 font-family: Georgia, Times, "Times New Roman", serif;
 margin: 0;
 padding: 0;
} 
cite {
 display: block;
 text-align: center;
}

Finally, use pseudo-elements :before and :after to stylize the punctuation in the quotation as well as to place an em dash—a horizontal dash equal to the default size of the font—before the name of the cited source:

blockquote p:before {
 content: "\201C"; 
 font-size: 1.2em;
 font-weight: bold;
 font-family: Georgia, Times, "Times New Roman", serif;
}
blockquote p:after {
 content: "\201D"; 
 font-size: 1.2em;
 font-weight: bold;
 font-family: Georgia, Times, "Times New Roman", serif;
}
cite:before {
 content: "\2014 ";
}
cite {
 display: block;
 text-align: center;
}

Discussion

Pseudo-elements are selector constructs ...