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

• <counter>
• <counter-name>
• <counter-style>

Guides

• Consistent list indentation

  • : Explains how to achieve consistent list indentation across different browsers.

• Using CSS Counters

  • : Explains how to use the CSS counter properties to control list counters.

Related concepts

• CSS counter styles

  • {{cssxref("@counter-style")}} at-rule
  • <counter-style-name> data type
  • <symbol> data type
  • {{cssxref("symbols()")}} function

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

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

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

Specifications

{{Specifications}}

See also

• CSS counter styles module
• CSS pseudo-elements module
• CSS generated content module