Here's the problem:
I have an ol li
ordered list with a start
attribute like so:
.custom {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol start="6" class="custom">
<li>This is the sixth item</li>
<li>This is the seventh item</li>
<li>This is the eighth item</li>
<li>This is the ninth item</li>
<li>This is the tenth item</li>
</ol>
I get the following output on the browser:
Is it possible to serialize the list-style
numbering on an ordered list using the value in start
attribute instead of 1
? No JavaScript can be used for this though.
You can simulate this using CSS variable that you set instead of start
and use it to reset the counter. For semantic purpose you can also keep start
attribute.
.custom {
margin: 0;
padding: 0;
list-style-type: none;
counter-reset: step-counter calc(var(--start) - 1);
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0, 200, 200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol style="--start:6" start="6" class="custom">
<li>This is the sixth item</li>
<li>This is the seventh item</li>
<li>This is the eighth item</li>
<li>This is the ninth item</li>
<li>This is the tenth item</li>
</ol>