November 1, 2019
Advice I Wish I Could Take For Myself
How To Change The Color Of Ordered List Items

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

Then I had a question: How would I 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 I 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 I found to be excessive. You can add any character you want though, like a "." or a ")" or a "~", whatever tickles your fancy.

 Profile Picture