marker-counter.html (1025B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 4 <title>CSS Lists test: use of `counter-*` in ::marker</title> 5 6 <link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-properties"> 7 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5265#issuecomment-3531669680"> 8 <meta name="assert" content="counter-* properties are supported in ::marker"> 9 10 <link rel="author" href="mailto:jkew@mozilla.com"> 11 12 <link rel="match" href="marker-counter-ref.html"> 13 14 <style> 15 ol { 16 counter-reset: my-counter; 17 padding-left: 5em; 18 } 19 ::marker { 20 counter-increment: my-counter; 21 content: "[" counters(my-counter, ":") "] "; 22 } 23 .set::marker { 24 counter-set: my-counter 10; 25 } 26 .reset::marker { 27 counter-reset: my-counter; 28 } 29 .reset::after { 30 counter-increment: my-counter; 31 content: " (" counters(my-counter, ":") ")"; 32 } 33 </style> 34 35 <ol> 36 <li>one 37 <li>two 38 <li class=set>set to 10 39 <li>next item 40 <li>next item 41 <li class=reset>reset <!-- instantiates a new counter on the current item --> 42 <li>next item 43 <li>last item 44 </ol>