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