CSS lists and counters
Please take two minutes to fill out our short survey.
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
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-style
at-rule<counter-style-name>
data type<symbol>
data typesymbols()
function
-
<ol>
start
,reversed
, andtype
attributes -
<ul>
type
attribute -
<li>
type
andvalue
attributes
Specifications
Specification |
---|
CSS Lists and Counters Module Level 3 |
See also
- CSS counter styles module
- CSS pseudo-elements module
- CSS generated content module