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

• counter-increment
• counter-reset
• counter-set
• list-style-image
• list-style-type
• list-style-position
• list-style shorthand

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

Pseudo-elements

• ::marker

Functions

• counter()
• 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

  • @counter-style at-rule
  • <counter-style-name> data type
  • <symbol> data type
  • symbols() 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