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

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.

score 3 · Accepted Answer · answered Jun 20 '17 at 10:54

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>

Great solution. I'm accepting this one because it uses pure CSS, as the question requested. — Jackson Holiday Wheeler, Jun 20 '17 at 10:59

score 0 · Answer 2 · answered Jun 20 '17 at 10:39

0

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>

answered Jun 20 '17 at 10:39

Okx

353
3
23

This is a good way to do it. For reference, the way I ended up doing this (I'm using React) is this: ``` {values.map(value => { return (
{value}

Jackson Holiday Wheeler

Jun 20 '17 at 10:59

score 0 · Answer 3 · answered Jun 21 '17 at 08:46

0

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>

answered Jun 21 '17 at 08:46

Eugene Mikhushkin

155
2
10

Interesting approach, although what you wrote doesn't exactly work in that it's not adding 0.5 each time, but rather adding 5 after the decimal. So when the second counter it gets to 10, it should increase the first counter and revert to 0. It should go 1, 1.5, 2, 2.5, 3, etc. Not 1, 1.5, 1.10, 1.15, 1.20, 1.25...that's not how decimals work. – Jackson Holiday Wheeler Jun 21 '17 at 09:00
1

I doubt it could be done by pure CSS for you requirements, but if you using SASS or another preprocessor, may be it could be done by @if statements. If you ask, I will search for answer. But in this case, the top answer much more easier i guess. – Eugene Mikhushkin Jun 21 '17 at 09:08
Yeah I think the accepted answers is a good workaround. No need to reinvent the wheel! I actually am using SCSS, but again the top answer works well enough. Thanks! – Jackson Holiday Wheeler Jun 21 '17 at 10:06

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

3 Answers3