Skip to main content

CSS lists and counters

The CSS lists and counters module enables styling and positioning of list item bullets and manipulating their values with a combination of strings, counters, and other features.

A list item's marker, whether a bullet symbol or ordinal counter, is its defining feature. List items are not limited to {{HTMLElement("li")}} elements nested within {{HTMLElement("ol")}} or {{HTMLElement("ul")}} elements. Rather, list items are any element with display: list-item set.

This module defines CSS features to set and reset a list's counters, set which counter-styles or symbols to use as its markers, and position those markers. It also provides developers with the ability to create customized markers.

Reference

Properties

  • {{cssxref("counter-increment")}}
  • {{cssxref("counter-reset")}}
  • {{cssxref("counter-set")}}
  • {{cssxref("list-style-image")}}
  • {{cssxref("list-style-type")}}
  • {{cssxref("list-style-position")}}
  • {{cssxref("list-style")}} shorthand

There is also a marker-side property, which is yet to be fully defined or implemented.

Pseudo-elements

  • {{cssxref("::marker")}}

Functions

  • {{cssxref("counter")}}
  • {{cssxref("counters")}}

Data types

Guides

  • CSS counter styles

  • {{HTMLElement("ol")}} start, reversed, and type attributes

  • {{HTMLElement("ul")}} type attribute

  • {{HTMLElement("li")}} type and value attributes

Specifications

See also