Custom CSS ordered list number circle style

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

Preview

First list item
Second list item
Third list item
Fourth list item

Html

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>
</ol>

/

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;
}

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

  li {
    list-style: none;
    margin: 1em 0;
    padding-left: 2.25em;
    position: relative;
  }
	  
  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;
  }
}

Description

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.

Accessibility

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.