counter-list-item.html (1235B)
1 <!DOCTYPE HTML> 2 <link rel="help" href="https://drafts.csswg.org/css-lists/#list-item-counter"> 3 <link rel="match" href="counter-list-item-ref.html"> 4 5 <style> 6 li:before { 7 content: counter(list-item) " "; 8 } 9 li:after { 10 content: " " counter(list-item); 11 } 12 </style> 13 14 <h2>Test counter(list-item), using generated content</h2> 15 16 <div style="float: left; width: 200px"> 17 18 Ordered lists 19 20 <ol> 21 <li>a</li> 22 <li>b</li> 23 <li>c</li> 24 </ol> 25 26 <ol start="30"> 27 <li>a</li> 28 <li>b</li> 29 <li>c</li> 30 </ol> 31 32 <ol> 33 <li>a</li> 34 <li>b</li> 35 <li value="30">c</li> 36 <li>d</li> 37 <li value="35">e</li> 38 <li>f</li> 39 </ol> 40 41 </div> 42 43 <div style="float: left; width: 200px"> 44 45 Reversed ordered lists 46 47 <ol reversed> 48 <li>a</li> 49 <li>b</li> 50 <li>c</li> 51 </ol> 52 53 <ol start="30" reversed> 54 <li>a</li> 55 <li>b</li> 56 <li>c</li> 57 </ol> 58 59 <ol reversed> 60 <li>a</li> 61 <li>b</li> 62 <li value="30">c</li> 63 <li>d</li> 64 <li value="35">e</li> 65 <li>f</li> 66 </ol> 67 68 </div> 69 70 <div style="float: left; width: 200px"> 71 72 Unordered lists 73 74 <ul> 75 <li>a</li> 76 <li>b</li> 77 <li>c</li> 78 </ul> 79 80 <ul> 81 <li>a</li> 82 <li>b</li> 83 <li value="30">c</li> 84 <li>d</li> 85 <li value="35">e</li> 86 <li>f</li> 87 </ul> 88 89 </div>