Skip to content
Vaihe Media logo

CSS: How to Remove Dots From Unordered Lists

Published:

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:

1ol {
2    counter-reset: item;
3    list-style-type: none;
4}
5

6ol li::before {
7    content: counter(item) " ";
8    counter-increment: item;
9}

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.