| <!DOCTYPE HTML> |
| |
| <style> |
| li:before { |
| content: counter(list-item) " "; |
| } |
| li:after { |
| content: " " counter(list-item); |
| } |
| </style> |
| |
| <h2>Test counter(list-item), using generated content</h2> |
| |
| <div style="float: left; width: 200px"> |
| |
| Ordered lists |
| |
| <ol> |
| <li>a</li> |
| <li>b</li> |
| <li>c</li> |
| </ol> |
| |
| <ol start="30"> |
| <li>a</li> |
| <li>b</li> |
| <li>c</li> |
| </ol> |
| |
| <ol> |
| <li>a</li> |
| <li>b</li> |
| <li value="30">c</li> |
| <li>d</li> |
| <li value="35">e</li> |
| <li>f</li> |
| </ol> |
| |
| </div> |
| |
| <div style="float: left; width: 200px"> |
| |
| Reversed ordered lists |
| |
| <ol reversed> |
| <li>a</li> |
| <li>b</li> |
| <li>c</li> |
| </ol> |
| |
| <ol start="30" reversed> |
| <li>a</li> |
| <li>b</li> |
| <li>c</li> |
| </ol> |
| |
| <ol reversed> |
| <li>a</li> |
| <li>b</li> |
| <li value="30">c</li> |
| <li>d</li> |
| <li value="35">e</li> |
| <li>f</li> |
| </ol> |
| |
| </div> |
| |
| <div style="float: left; width: 200px"> |
| |
| Unordered lists |
| |
| <ul> |
| <li>a</li> |
| <li>b</li> |
| <li>c</li> |
| </ul> |
| |
| <ul> |
| <li>a</li> |
| <li>b</li> |
| <li value="30">c</li> |
| <li>d</li> |
| <li value="35">e</li> |
| <li>f</li> |
| </ul> |
| |
| </div> |
| |
| <div style="float: left; width: 200px"> |
| |
| Some simple combinations with directives |
| |
| <ol style="counter-reset: list-item 100"> |
| <li>a</li> |
| <li style="counter-increment: list-item 200">b</li> |
| <li style="counter-reset: list-item 400">c</li> |
| <li style="counter-reset: list-item 500; counter-increment: list-item 600">d</li> |
| </ol> |
| |
| <ol start="30"> |
| <li>a</li> |
| <li style="counter-increment: list-item 200">b</li> |
| <li style="counter-reset: list-item 400">c</li> |
| <li style="counter-reset: list-item 500; counter-increment: list-item 600">d</li> |
| </ol> |
| |
| </div> |
