CSS 计数器：你能增加非整数（即浮点数）吗？答案

【问题标题】：CSS Counters: Can you increment by non-integers (i.e. floats)?CSS 计数器：你能增加非整数（即浮点数）吗？
【发布时间】：2017-11-22 20:28:59
【问题描述】：

我已经看到您可以使用各种类型的计数器，如该问题的公认答案所述：CSS Pseudo Element Counters: can you increment an alphabet letter "a", "b", "c", etc instead of a number?

但是，是否可以通过浮点数递增，例如0.5?这将给出一个列表，例如 3.0、3.5、4.0、4.5 等。

这是我尝试做的，但无济于事：

.values li:before {
  content: counter(step);
  counter-increment: step 0.5;
}

step 之后的值如果是浮点数则无法识别（仅限整数）。

如果这是不可能的，我是否可以使用另一种方法来根据需要以编程方式设置<li> 元素？

谢谢。

【问题讨论】：

标签： css pseudo-element

【解决方案1】：

您无需任何技巧即可完成，CSS 支持此功能。您需要在内容值中添加几个counters。

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>

【讨论】：

有趣的方法，虽然你写的并不完全有效，因为它不是每次加 0.5，而是在小数点后加 5。因此，当第二个计数器达到 10 时，它应该增加第一个计数器并恢复为 0。它应该变为 1、1.5、2、2.5、3 等。而不是 1、1.5、1.10、1.15、1.20、1.25 .. .这不是小数的工作方式。
我怀疑它可以通过纯 CSS 来满足您的要求，但如果您使用 SASS 或其他预处理器，它可能可以通过 @if 语句来完成。如果你问，我会寻找答案。但在这种情况下，我猜最上面的答案要容易得多。
是的，我认为接受的答案是一个很好的解决方法。无需重新发明轮子！我实际上正在使用 SCSS，但最重要的答案再次运行良好。谢谢！

【解决方案2】：

您可以使用多个规则和nth-child 等来伪造它

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>

【讨论】：

很好的解决方案。我接受了这个，因为它使用纯 CSS，正如问题所要求的那样。

【解决方案3】：

CSS 可能不是你可以使用的最好的东西。尝试使用 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>

【讨论】：

这是一个很好的方法。作为参考，我最终这样做的方式（我正在使用 React）是这样的：``` {values.map(value => { return (
{value}

values