Geek Answers Handbook

CSS Counter Enlarger Doesn't Work

This is my CSS and HTML:

.moving-steps > li:before { background: none repeat scroll 0 0 #8F8888; border-radius: 15px; color: #FFFFFF; counter-increment: headings 1; content: counter(headings, decimal); display: block; float: left; font-size: 16px; font-weight: bold; height: 25px; line-height: 26px; margin-bottom: 0; margin-right: 5px; text-indent: 8px; width: 25px; } 
 <ul class="moving-steps"> <li></li> <li></li> <li></li> </ul>

This code does not work.

  counter-increment: headings 1; content: counter(headings, decimal);

Inserts 1 every time, what am I missing?

+6
source share
2 answers

You should have this css on ul itself:

 .moving-steps { counter-reset: headings; }

and counter-increment should contain only headings :

 .moving-steps > li:before { counter-increment: headings; }

Check out JS Fiddle :

 .moving-steps { counter-reset: headings; list-style: none; } .moving-steps > li:before { background: none repeat scroll 0 0 #8F8888; border-radius: 15px; color: #FFFFFF; counter-increment: headings; content: counter(headings, decimal); display: block; float: left; font-size: 16px; font-weight: bold; height: 25px; line-height: 26px; margin-bottom: 0; margin-right: 5px; text-indent: 8px; width: 25px; } 
 <ul class="moving-steps"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
+11
source

Just add the following style

 body{counter-reset: headings;}

then the value will be increment

+1
source

More articles:


All Articles