Custom CSS ordered list number circle style

This is how you can do custom CSS ordered list item increment styles with no JavaScript.


  1. First list item
  2. Second list item
  3. Third list item
  4. Fourth list item


Click to edit (doesn't update preview)

<ol class="list-circles">
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
  <li>Fourth list item</li>


Click to edit (doesn't update preview)

.list-circles {
  counter-reset: li;
  padding: 0;
  margin: 0;
  list-style: none;

.list-circles li {
  list-style: none;
  margin: 1em 0;
  padding-left: 2.25em;
  position: relative;

.list-circles li::after {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  font-size: 0.9em;
  left: 0;
  font-weight: 600;
  top: -0.25em;
  width: 1.75em;
  height: 1.75em;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;


How it works

This pure HTML + CSS code snippet uses the counter-reset and counter-increment CSS properties to count the list amount, and then the content property on the ::before pseudo element to display it. Everything else is just for styling purposes.


This styling is just visual styling and does not affect how screen readers interact with the list at all. Do remember to use <ol> instead of <ul> when using custom numbers like this, as then screen readers will announce the numbers correctly. This is an ordered list after all, not an unordered list.