Custom list counter styles with CSS

Tested in this page:

• basic list counter
• positive increments > 1
• negative increments

This test page uses CSS rather than HTML attributes. We're using a custom CSS counter (no way to use/overwrite the default list counter?). CSS 2.1 reference: http://www.w3.org/TR/CSS2/generate.html#counters.

Note that, in CSS 2.1, it seems that there is no way to count backwards (for instance for a list of 6 elements you would have 6, 5, 4, …). To get this effect with CSS counters, you would need to know how many items there are in the list, start from this (counter-reset) and use a negative increment.

Basic list counter

1. Item A
2. Item B
3. Item C
4. Item D

Counting from 50

1. Item A
2. Item B
3. Item C
4. Item D

Counting in tens, from 50

1. Item A
2. Item B
3. Item C
4. Item D

Negative increment (-1), starting from -10

1. Item A
2. Item B
3. Item C
4. Item D

Negative increment (-10), starting from 50

1. Item A
2. Item B
3. Item C
4. Item D

Illusion of <ol reversed>

1. Item A
2. Item B
3. Item C
4. Item D
5. Item E

I said it was an illusion, right?
Look, not working with more (or less) items:

1. Item A
2. Item B
3. Item C
4. Item D
5. Item E
6. Item F
7. Item G
8. Item H