Value[list-style-type || list-style-position || list-style-image] | inherit
Used withlist item elements
ExampleUL { list-style: decimal inside }
This allows you to set 'list-style-type', 'list-style-image', and 'list-style-position' at once.


Valuecountingsystem | disc | circle | square | none | inherit
Used withdisplay-item elements
This property specifies the appearance of the marker used for list items. Note that unrecognised counting systems will be displayed as decimal, and the alphabetical systems are undefined beyond their end point (i.e. "Z" or its equivalent) .

countingsystem is one of
  • decimal1, 2, 3, ...
  • decimal-leading-zero inserts extra zeros : 01, 02, 03, ..., 98, 99.
  • lower-roman, upper-roman : roman numerals.
  • hebrew, georgian, armenian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha
  • lower-latin or lower-alpha : a, b, c, ...
  • upper-latin or upper-alpha : A, B, C, ...
  • lower-greek

Specifies what type of marker character is used in lists.
  OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
  OL { list-style-type: lower-alpha }   /* a b c d e etc. */
  OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */


Valueaddress none | inherit
Used withlist item elements

Specifies an image that will be used as the marker in lists.


Valueinside | outside | inherit
Used withlist item elements

This property determines whether the list markers are displayed outside the block of text, or inside with the text immediately following.


Valuelength [auto] | inherit
Used withall elements
ExampleUL { counter-increment: listitem 1 }
This property sets the distance between list marker and the text in the list. Lengths may be negative if they are displayable.



Value[countername [integer]] | none| inherit
Used withall elements
ExampleUL { counter-reset: listitem 1 }
This property lists the names of counters, which you desginate yourself, along with its optional integer value. The counter is reset to this value each time the element, which this property is assigned to, occurs. The default is 0.


Value[countername [integer]] | none| inherit
Used withall elements
ExampleUL { counter-increment: listitem 1 }
This lists any number of counters, along with an optional integer which specifies how much to advance the counter by, each time the element which this property is assigned to occurs. The default increment is 1, and non-positive values can be used. If the counter is also used by the element, it is incremented first. The counter is incremented after any reset operation occurs on it.

To specify multiple counters for an element, you MUST list them together, otherwise the latter definition will over-rule the earlier one.


Counters will be nested if redefined within a block where they are already used. For example, if a counter is used on an <UL> list, and a second list is created within a first list, then the second list will have a counter of its own, independant of the first. References to the counter will automatically refer to the appropriate instance of the counter.

Appearance of counters

The default display is decimal, but you can use counter(countername, list-style-type) to specify alternatives, which are defined in the description of the list-style-type property.

Any element that has the display element set to none is unable to use counters.

Displaying Counters

Counters are displayed with the content property of the :before and :after pseudo-elements.
  • counter(countername, [style]). The optional style attribute is normally decimal, but can be anything defined for the list-style-type property.
  • counter(countername, string, style) displays all the counters of the given countername, spereated by the given string.
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.