Bold Numbers on Ordered List

At the heart of the web apps I write, once you strip away all of the libraries, is just HTML and CSS. At times I forget that and tend to over-think problems. Recently I needed to make the numbers of an ordered list bold without making the content of the list items <li> bold. For a short time I was stumped. The number is considered by HTML to be part of <li> tag, but there is no way to address it individually.

On the web I ran across a lot of solutions to this issue, none of which felt right to me, they were all too complicated. The solution I chose was so simple, I don't why I had to think about. 

The contents of the <li> tags is completely under my control, so instead of trying to think of a way to address the numbers, I instead decided to address the <li> tags. All I needed to do was to put a <span> tag inside of each <li> tag, I would then be able to address the <li> without affecting the number. So I made the <ol> tag have bold text and made the <li><span> combination have normal text. Problem solved.

Popular Posts