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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| ol { | |
| font-weight:bolder; | |
| } | |
| ol li span { | |
| font-weight: normal; | |
| } | |
| </style> | |
| <ol > | |
| <li><span>Get Your Wheels rotated and aligned</span></li> | |
| <li><span>Have Copies of Proof of insurance and roadside assistance</span></li> | |
| <li><span>Get a Phone charger</span></li> | |
| <li><span>Pick up a GPS</span></li> | |
| </ol><br/> |
