Skip to content

CSS: How to Remove Dots From Unordered Lists

Published at:

This CSS code will get rid of the dots that appear before ordered list items (the $<li> items inside $<ol>).

Before:

A numbered list before the dots have been removed via CSS

After:

A numbered list after the dots have been removed via CSS

Here's the CSS code:

1 2 3 4 5 6 7 8 9 ol { counter-reset: item; list-style-type: none; } ol li::before { content: counter(item) " "; counter-increment: item; }

Also available at Codepen: https://codepen.io/vaihe/pen/LYeYMez

What does it do? It first removes the list styling by doing list-style-type: none, then it adds counter using the CSS native "counter-increment" and displays that using the ::before pseudo-element.