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/counter-list-item.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<link rel="match" href="counter-list-item-ref.html">
<style>
li:before {
content: counter(list-item) " ";
}
li:after {
content: " " counter(list-item);
}
</style>
<h2>Test counter(list-item), using generated content</h2>
<div style="float: left; width: 200px">
Ordered lists
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol start="30">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol>
<li>a</li>
<li>b</li>
<li value="30">c</li>
<li>d</li>
<li value="35">e</li>
<li>f</li>
</ol>
</div>
<div style="float: left; width: 200px">
Reversed ordered lists
<ol reversed>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol start="30" reversed>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<ol reversed>
<li>a</li>
<li>b</li>
<li value="30">c</li>
<li>d</li>
<li value="35">e</li>
<li>f</li>
</ol>
</div>
<div style="float: left; width: 200px">
Unordered lists
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li value="30">c</li>
<li>d</li>
<li value="35">e</li>
<li>f</li>
</ul>
</div>