CSS计数器：你可以通过非整数（即浮点数）增加吗？

Question

我已经看到了你可以使用各种类型的计数器，作为公认的回答这个问题描述：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>元素？

谢谢。

Answer 1

您可以与多个规则和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>

Answer 2

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>

Answer 3

你可以做到这一点没有任何黑客，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>