Add an autoincremental value with css counter -


i want add incremental value through css, apparently doing wrong.

html

<ul role="menu" style="left: 0px; position: absolute; top: 0px;">     <li id="slideshow-13675338798500">     <a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-1.png" role="menuitem" tabindex="0">     <span class="thmubbutton"></span>     </a>     </li>     <li id="slideshow-13675338798501">     <a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-2.png" role="menuitem" tabindex="1">     <span class="thmubbutton"></span>     </a>     </li>     <li id="slideshow-13675338798502">     <a class="slideshow-thumbnails-hidden" href="images/slideshow/slide-3.png" role="menuitem" tabindex="2">     <span class="thmubbutton"></span>     </a>     </li>  </ul> 

css

span.thmubbutton{     counter-increment: myindex; }  span.thmubbutton:before { content:counter(myindex); } 

the output 1 | 1 | 1

demo

you need reset counter 0 before using it.

body {   counter-reset: myindex;    } 

fiddle: http://jsfiddle.net/zgegs/1/

more info on counters here: https://developer.mozilla.org/en-us/docs/css/counters


Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -