Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-lists/marker-counter.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Lists test: use of `counter-*` in ::marker</title>
<meta name="assert" content="counter-* properties are supported in ::marker">
<link rel="author" href="mailto:jkew@mozilla.com">
<link rel="match" href="marker-counter-ref.html">
<style>
ol {
counter-reset: my-counter;
padding-left: 5em;
}
::marker {
counter-increment: my-counter;
content: "[" counters(my-counter, ":") "] ";
}
.set::marker {
counter-set: my-counter 10;
}
.reset::marker {
counter-reset: my-counter;
}
.reset::after {
counter-increment: my-counter;
content: " (" counters(my-counter, ":") ")";
}
</style>
<ol>
<li>one
<li>two
<li class=set>set to 10
<li>next item
<li>next item
<li class=reset>reset <!-- instantiates a new counter on the current item -->
<li>next item
<li>last item
</ol>