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 <li> elements nested within <ol> or <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

• shorthand

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

Pseudo-elements

Functions

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

  • at-rule

  • <counter-style-name> data type

  • <symbol> data type

  • function

  <ol> start, reversed, and type attributes

• <ul> type attribute

• <li> type and value attributes

Specifications

See also

• CSS counter styles module

• CSS pseudo-elements module

• CSS generated content module