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>