CSS Counters: Can you increment by non-integers (i.e. floats)? - css

Question

I've seen that you can use various types of counters, as described in the accepted answer to this question: CSS Pseudo Element Counters: can you increment an alphabet letter "a", "b", "c", etc instead of a number?
However, is it possible to increment by a float, e.g. 0.5? This would give a list of, say, 3.0, 3.5, 4.0, 4.5, etc.
Here is what I've tried to do, to no avail:
.values li:before {
content: counter(step);
counter-increment: step 0.5;
}
The value after step is not recognized if it's a float (only if integer).
If this is not possible, is there another method I could use to programmatically set the <li> elements as desired?
Thank you.

Answer 1

You can fake it with multiple rules and nth-child etc
ul {
counter-reset: numbers;
list-style-type: none;
}
li:before {
padding-right: 1em;
}
li:nth-of-type(2n+1)::before {
counter-increment: numbers;
}
li:nth-child(odd)::before {
content: counters(numbers, "") ".0";
}
li:nth-child(even)::before {
content: counters(numbers, "") ".5";
}
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>

Answer 2

CSS probably isn't the best thing you can use for this. Try using JavaScript:
var children = document.getElementById("values").children;
var value = 1;
for(var i = 0; i < children.length; i++) {
var child = children[i];
child.innerHTML = value + " " + child.innerHTML;
value += 0.5;
}
<ul id="values">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Answer 3

You can do it without any hacks, CSS supports this feature. You need to add few counters to content value.
ol {
counter-reset: section;
list-style-type: none;
counter-reset: subsection;
counter-increment: section;
}
li::before {
counter-increment: subsection 5;
content: counter(section) "." counter(subsection) " ";
}
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>