symbols-function-ref.html (2146B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Reference: symbols function, invalid</title> 4 <link rel="author" title="Xidorn Quan" href="https://www.upsuper.org/"> 5 <link rel="stylesheet" href="support/test-common.css"> 6 <style type="text/css"> 7 @counter-style cyclic { 8 system: cyclic; 9 symbols: '*' '\2020' '\2021' '\A7'; 10 suffix: ' '; 11 } 12 @counter-style numeric { 13 system: numeric; 14 symbols: '0' '1' '2'; 15 suffix: ' '; 16 } 17 @counter-style alphabetic { 18 system: alphabetic; 19 symbols: '\26AA' '\26AB'; 20 suffix: ' '; 21 } 22 @counter-style symbolic { 23 system: symbolic; 24 symbols: '*' '\2020' '\2021' '\A7'; 25 suffix: ' '; 26 } 27 @counter-style fixed { 28 system: fixed; 29 symbols: '\25F0' '\25F1' '\25F2' '\25F3'; 30 suffix: ' '; 31 } 32 @counter-style counter { 33 symbols: '*'; 34 } 35 @counter-style counters { 36 system: numeric; 37 symbols: '0' '1'; 38 } 39 .counter { counter-reset: a; } 40 .counter p { counter-increment: a 1; } 41 .counter p::after { 42 content: counter(a, counter); 43 } 44 .counter, .counters { 45 list-style-type: none; 46 counter-reset: a; 47 } 48 .counter li, .counters li { 49 counter-increment: a; 50 padding-right: .5em; 51 } 52 .counter li::after { 53 content: counter(a, counter); 54 } 55 .counters .counters li::after { 56 content: counters(a, '.', counters); 57 } 58 </style> 59 <ol start="-2" style="list-style-type: symbolic"> 60 <li><li><li><li><li> 61 <li><li><li><li><li> 62 </ol> 63 <ol start="-2" style="list-style-type: cyclic"> 64 <li><li><li><li><li> 65 <li><li><li><li><li> 66 </ol> 67 <ol start="-2" style="list-style-type: numeric"> 68 <li><li><li><li><li> 69 <li><li><li><li><li> 70 </ol> 71 <ol start="-2" style="list-style-type: alphabetic"> 72 <li><li><li><li><li> 73 <li><li><li><li><li> 74 </ol> 75 <ol start="-2" style="list-style-type: symbolic"> 76 <li><li><li><li><li> 77 <li><li><li><li><li> 78 </ol> 79 <ol start="-2" style="list-style-type: fixed"> 80 <li><li><li><li><li> 81 <li><li><li><li><li> 82 </ol> 83 <ol class="counter"> 84 <li><li><li><li><li> 85 </ol> 86 <ol class="counters"> 87 <li><ol class="counters"><li><li><li><li><li></ol></li> 88 <li><ol class="counters"><li><li><li><li><li></ol></li> 89 </ol>