CSS: How to Remove Dots From Unordered Lists
This CSS code will get rid of the dots that appear before ordered list items (the $<li> items inside $<ol>).
Before:
After:
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.