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", "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