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
-
- : Explains how to achieve consistent list indentation across different browsers.
-
- : Explains how to use the CSS counter properties to control list counters.
Related concepts
-
- {{cssxref("@counter-style")}} at-rule
<counter-style-name>
data type<symbol>
data type- {{cssxref("symbols", "symbols()")}} function
-
{{HTMLElement("ol")}}
start
,reversed
, andtype
attributes -
{{HTMLElement("ul")}}
type
attribute -
{{HTMLElement("li")}}
type
andvalue
attributes
Specifications
See also
- CSS counter styles module
- CSS pseudo-elements module
- CSS generated content module