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

  • bold. For a short time I was stumped. The number is considered by HTML to be part of
  • 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

  • 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
  • tags. All I needed to do was to put a tag inside of each
  • tag, I would then be able to address the
  • without affecting the number. So I made the
      tag have bold text and made the

    1. combination have normal text. Problem solved.


    Leave a Reply

    Fill in your details below or click an icon to log in: Logo

    You are commenting using your account. Log Out /  Change )

    Google photo

    You are commenting using your Google account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    Connecting to %s