November 1, 2019
Issues we've come across, and how we fixed them.
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.

 Profile Picture
Comment

Proudly Serves

Allentown, Bethlehem, Lehigh Valley... and everywhere else!

Follow Our Socials