You can use the counter-reset and counter-increment properties for this. You should use the :before pseudo-element in list items.
Here is an example.
First you need to run the counter. You can do this using the counter-reset property.
ol { counter-reset: item 49; list-style: none; }
The syntax for counter-reset is as follows
counter- reset: none | name number | initial | inherit;
Here we give the name and then the number that you want to start after. Since it starts with 0 by default, you want to select 49, not 50.
Finally, we can start styling our rooms so that they look beautiful. We do this with the :before pseudo-element. In the content property, we can include the value of our counter, which we determined using the counter-reset property above.
li:before { margin-right: 10px; // Gives us breathing room after number padding: 3px; content: counter(item); background: lightblue; border-radius: 100%; // Gives circle shape color: white; width: 1.2em; text-align: center; display: inline-block; }
ol { counter-reset: item 49; list-style: none; } li { counter-increment: item; margin-bottom: 5px; } li:before { margin-right: 10px; padding: 3px; content: counter(item); background: lightblue; border-radius: 100%; color: white; width: 1.2em; text-align: center; display: inline-block; }
<ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
It should also be noted that counter-reset and counter-increment only work on IE8 or higher.
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment