Markers and lists

Most block-level elements in CSS generate one principal block box. In this section, we discuss two CSS mechanisms that cause an element to generate two boxes: one principal block box (for the element's content) and one separate marker box (for decoration such as a bullet, image, or number). The marker box may be positioned inside or outside the principal box. Unlike :before and :after content, the marker box does not affect the position of the principal box, whatever the positioning scheme.

The more general of the two mechanisms is new in CSS2 and is called markers. The more limited mechanism involves the list properties of CSS1. The list properties give authors quick results for many common ordered and unordered list scenarios. However, markers give authors precise control over marker content and position. Markers may be used with counters to create new list styles, to number margin notes, and much more.

For instance, the following example illustrates how markers may be used to add periods after each numbered list item. This HTML program and style sheet:

Creating a list with markers

  1. This is the first item.
  2. This is the second item.
  3. This is the third item.

should produce something like this:

i. This is the first item.
ii. This is the second item.
iii. This is the third item.

With descendant selectors and child selectors, it's possible to specify different marker types depending on the depth of embedded lists.