Problem
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 that browsers use first
to select portions and then to stylize a web page that can't be marked up
through standard HTML. For instance, you can use pseudo-elements to stylize the
first line of a paragraph or, in the case of this Recipe, to place generated
content before and after an actual element.
In this Solution we insert smart quotes around the actual quotation. For
the left double quotes, we use this declaration:
content: "\201C ";
Any text that you want displayed after an element needs to be
marked off with double quotes. Because we are using double quotes to mark what
should be displayed, we can't put another set of double quotes inside the first
set. To put quotes around the quotation, we need to use the hexadecimal value
for a quotation mark, which is 201C.
Because anything between the quotation marks automatically is
generated as is, we need to escape the hexadecimal number that tells the browser
to render the quotation marks by placing a forward slash in front of the double
quotes.
The content property in the CSS 2.1 specification
contains values for easily inserting quotation marks. For example, to re-create
the left double quotes, use the following declaration:
content: open-quote;
However, note that open quote keyword value specification is
implemented only in Mozilla and Opera. Also, note that the :before and
:after pseudo-elements don't work in Internet Explorer 5+ for Windows
and Internet Explorer for Macintosh.
