bold the numbers in a ol li list

sounds like an easy thing to do, but maybe not so simple. you can do this using the counter css element. code below:

HTML

<ol class='bold-list'>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

CSS

ol.bold-list {
  margin: 0 0 1.5em;
  padding: 0;
  counter-reset: item;
}

ol.bold-list > li {
  margin: 0;
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol.bold-list > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  text-align: right;
  content: counter(item) ".";
}
  1. item
  2. item
  3. item

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 530 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
There is no way to happiness. Happiness is the way.
Unknown