Remove Decimal from Ordered List

This quick tip came in handy for a project that I am currently working on. I needed an ordered list with no decimals after the numbers so that, instead of:

1. [Content]
2. [Content]
3. [Content]

It would look like:

1 [Content]
2 [Content]
3 [Content]

There is no straight out CSS list style for this, so you have to get a bit more advanced. To remove the decimal, use the following code:

ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) " "; counter-increment: item }

You can go a step further and also play around with CSS styles on the number to separate it from the rest of the text:

li:before { content: counter(item) " "; counter-increment: item; color: #09c; font-size: 18px; font-weight: bold; }

This results in the following style:

1. This item does not have a decimal point
2. The number is also light blue
3. No need to use extra html inside the list-item
4. How cool is that?

This works in Firefox, Chrome and IE9+ (sometimes IE8?) – be sure to have a backup in place for lower versions of Internet Explorer because the numbers might just disappear completely…

The post Remove Decimal from Ordered List appeared first on Local Wisdom.