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