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 <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-incrementcounter-resetcounter-setlist-style-imagelist-style-typelist-style-positionlist-styleshorthand
There is also a marker-side property, which is yet to be fully defined or implemented.
Pseudo-elements
Functions
Data types
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
-
@counter-styleat-rule<counter-style-name>data type<symbol>data typesymbols()function
-
<ol>start,reversed, andtypeattributes -
<ul>typeattribute -
<li>typeandvalueattributes
Specifications
| Specification |
|---|
| CSS Lists and Counters Module Level 3 |
See also
- CSS counter styles module
- CSS pseudo-elements module
- CSS generated content module