Skip to main content

It's possible with setting the list-style to 'none' and replacing the default numbering with CSS counters and pseudo-elements. Example: http://jsbin.com/agagoc/1/edit

ol { list-style: none; counter-reset: my-awesome-counter; } li { counter-increment: my-awesome-counter; } li:before { content: counter(my-awesome-counter); /* any style for numbers, as if they were spans before the content of LIs, goes here */ } 
ol { list-style: none; counter-reset: my-awesome-counter; } li { counter-increment: my-awesome-counter; } li:before { content: counter(my-awesome-counter); /* any style for numbers, as if they were spans before the content of LIs, goes here */ } 

It's possible with setting the list-style to 'none' and replacing the default numbering with CSS counters and pseudo-elements. Example: http://jsbin.com/agagoc/1/edit

ol { list-style: none; counter-reset: my-awesome-counter; } li { counter-increment: my-awesome-counter; } li:before { content: counter(my-awesome-counter); /* any style for numbers, as if they were spans before the content of LIs, goes here */ } 

It's possible with setting the list-style to 'none' and replacing the default numbering with CSS counters and pseudo-elements. Example: http://jsbin.com/agagoc/1/edit

ol { list-style: none; counter-reset: my-awesome-counter; } li { counter-increment: my-awesome-counter; } li:before { content: counter(my-awesome-counter); /* any style for numbers, as if they were spans before the content of LIs, goes here */ } 
Source Link
Ilya Streltsyn
  • 13.6k
  • 2
  • 40
  • 64

It's possible with setting the list-style to 'none' and replacing the default numbering with CSS counters and pseudo-elements. Example: http://jsbin.com/agagoc/1/edit

ol { list-style: none; counter-reset: my-awesome-counter; } li { counter-increment: my-awesome-counter; } li:before { content: counter(my-awesome-counter); /* any style for numbers, as if they were spans before the content of LIs, goes here */ }