How To Change The Color Of Ordered List Items

Today we came across the idea of reshaping our code div inside these posts. We wanted it to be a dark theme, because we rather prefer a darker background while writing in code. So we made the background dark, color of the font white, even added a separate color for any comments that we'll put after lines to explain more.

Then we had a question: How would we change the color of the list number on the side? It's attached to the <li> itself, but there must be a way to change the color or even organization of it. So we went to Google, and found this interesting little solution.

• <ul>
• <li>List Item One</li>
• <li>List Item Two</li>
• </ul>
• <style>
• ul > li{
• color: #000;
• counter-increment: list;
• min-height: 21px; /* mandatory so empty lines will show and not be merged */
• position: relative;
• }
• ul > li:before{
• color: #555;
• content: counter(list);
• left: -32px;
• position: absolute;
• text-align: right;
• width: 26px; /* need to specify width to allow numbers to be right aligned */
• }
• </style>

This allows you to create your own little list-style, and custom color it however you like. You can see it working inside of the code block itself.

One issue is you need to have a minimum height on the <li> or an empty line will merge with the next line. You also have to specify a width to the li:before{ } portion to force the numbers to be right aligned. Having the numbers aligned to the right of that column looks a lot nicer than to the left.

You can also add more to the number by changing the content:counter(list) to something like this ~ content: counter(list)"."; Doing that will add a dot to the end of each line, which we found to be excessive. You can add any character you want though, like a "." or a ")" or a "~", whatever tickles your fancy.