CHAPTER 9 The Next Steps for Web Typography
/* — or — */
blockquote p:first-child: before {
content: "“";
font-size: 4em;
color: #eee;
float: left;
margin: -.33em 0 0 -.5em;
}
blockquote p:last-child: after { content: "”"; }To provide a pair of quotation marks for each respective language along
with their nested alternatives, we would use the :lang selector:q:lang(de) { quotes: '„' '“' '‚' "‘" }
q:lang(en-gb) { quotes: "‘" "’” '“' '”' }
q:lang(en-us) { quotes: '“' '”’ "‘" "’" }
q:lang(fr) { quotes: '« ' ' »’ "“" "”" }
q:before { content: open-quote }
q:after { content: close-quote }Each language has its own set of rules, so I encourage you to check out
“Non-English usage of quotation marks”^74 at Wikipedia.automatic Multilevel numbering
Automatic numbering in multilevel content provides readers with an easy
to follow outline and enforces hierarchy. With automatic numbering, styl-
ing ordered list items in a “1., 1.1., 1.1.1.” fashion becomes ridiculously easy.ol { counter-reset: item }
ol li { display: block }
ol li:before {
content: counters(item, ".") ". ";
counter-increment: item;
}74 http://en.wikipedia.org/wiki/Non-English_usage_of_quotation_marks