New Perspectives On Web Design

By Marko Dugonjić CHAPTER 9

hanging Symbols and numbers
Instead of relying on the list-style property which we cannot control,
we can use the :before pseudo-element to add bullets or en dashes before
text in list items and regain full control over such symbols. Options are
now limitless and one that immediately comes to mind is using a different
shade of gray for the hanging bullet.

li {
list-style: none;
}
ul li:before {
content: "–"; / en dash /
float: left;
margin-left: -1em;
color: #999;
}

ol { counter-reset: item }
/ “item” is an arbitrary variable, by default equals zero /

ol li:before {
content: counter(item) ". ";
counter-increment: item; / equals item++ /
float: left;
margin-left: -1em;
}

Quotation Marks
Following the same principle from the previous section, we can add a
pinch of elegance to blockquotes.

blockquote:before {
content: "“";
font-size: 4em;
color: #eee;
float: left;
margin: -.33em 0 0 -.5em;
}