HTML and CSS Reference
Figure 15-4. The ::after pseudo-element automatically appends the URL to the external link
Generating Quotes Automatically
HTML has two elements that are intended to mark up quotations: <q> and <blockquote> . The first one is
intended for short, inline quotations, whereas <blockquote> is reserved for lengthy quotations that are intended
to be set off from the surrounding text.
You shouldn't use quotation marks with <q> tags. The browser inserts them for you. For a long time,
browsers failed to do so, but all modern browsers (including IE 8) now insert quotation marks correctly. However,
IE 8+ uses single curly quotes, Firefox uses double curly quotes, and other browsers use double straight quotes.
The <blockquote> element > doesn't automatically add quotation marks. You need to add them yourself if
you want them.
With the help of the quotes property and the ::before and ::after pseudo-elements, you can control
the generation of quotation marks not only for <q> , but also for any other element. What's more, you can set up
sequences to ensure that nested quotations are marked up correctly. For example, you can follow the American
typographical practice of double quotes first, followed by single ones for nested quotations. Alternatively, you can
use the British convention of single quotes followed by double ones. Or if you're working with another language,
you can use the correct glyphs.
The quotes property expects a space-separated list of pairs of opening and closing quotation marks. If you
specify multiple pairs, they're used in sequence depending on how deep the quotations are nested. The browser
automatically keeps track of the level of nesting.
To generate curly quotes or other types of quotation marks, use the hexadecimal codes listed in Table 15-2 .
Table 15-2. Hexadecimal Codes for Generating Quotation Marks
Left single quotation mark
Right single quotation mark
Left double quotation mark
Right double quotation mark
Double low-9 quotation mark
Left double-angle quotation mark
Right double-angle quotation mark
■ The hexadecimal codes for other quotation marks can be found in the Unicode General Punctuation block