CSS: The Definitive Guide, 5th Edition

Chapter 16. Lists and Generated Content

In the realm of CSS layout, lists are an interesting case. The items in a list are simply block boxes, but with an extra bit that doesn’t really participate in the document layout hanging off to one side. With an ordered list, that extra bit contains a series of increasing numbers (or letters) that are calculated and mostly formatted by the user agent, not the author. Taking a cue from the document structure, the user agent generates the numbers and their basic presentation.

With CSS, you can define your own counting patterns and formats, and associate those counters with any element, not just ordered list items. Furthermore, this basic mechanism makes it possible to insert other kinds of content, including text strings, attribute values, or even external resources, into a document. Thus, it is possible to use CSS to insert link icons, editorial symbols, and more into a design without having to create extra markup.

To see how all these list options fit together, we’ll explore basic list styling before moving on to examine the generation of content and counters.

Working with Lists

In a sense, almost anything that isn’t narrative text can be considered a list. The US Census, the solar system, my family tree, a restaurant menu, and even all of the friends you’ve ever had can be represented as a list, or perhaps as a list of lists. These many variations make lists fairly important, which is why it’s a shame that list styling in CSS isn’t more ...