Custom, regular, ordered bullet list style

Question

I want a list style like this ( jsfiddle ):

As you can see, the list style is:

1. not one of the styles provided by CSS, ie, a custom made style
2. is regular, ie, I don't have to manually put values 1, 2, 3, etc. for the <li> s. So, if I have four <li> s, it will automatically put four green circles with 1,2,3,4 as the values.

Question:

How do I achieve this task?

Answer 1

You can do this automatically using CSS counters. CSS counters are incremented when a matching selector is found in the DOM (we can specify by how much to increment also but that's out of scope for this answer). Then the counter's value can be set to the content property of a pseudo-element.

 ul { counter-reset: li-counter; list-style-type: none; } li { counter-increment: li-counter; margin: 10px; } li:before { display: inline-block; content: counter(li-counter); height: 30px; width: 30px; border-radius: 50%; background: #20ED89; color: white; text-align: center; line-height: 30px; margin: 10px; } 

 <ul> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li> </ul>