CSS custom numbered list styling

The other day we made an emoji list. And I wanted to include another potent CSS property called CSS Counters.

This is the result in Codepen.

See the Pen CSS custom numbered list styling by Chris Bongers (@rebelchris) on CodePen.

What are CSS Counters?

They are variables controlled by CSS, whose values can increment by specific CSS rules.

We can use the following properties in CSS.

content -> Used to place the counter() property.
counter-reset -> Creates or resets an counter
counter-increment -> Increment a specific counter
counter() -> Adds the value to an element

HTML Structure

Let’s create a straightforward example using two lists. We want each list to re-start the counter.

<div>
  <ol>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
  </ol>
</div>
<div>
  <ol>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
    <li>Item #5</li>
  </ol>
</div>

CSS counter styling

So how do we now use CSS counters?

Let’s start with the <ol> element.

ol {
  counter-reset: custom;
  list-style-type: none;
  padding: 0;
  margin: 0px 20px;
}

We start by resetting the list counter called custom. Then we remove the default list style since we will add this custom one.

Now we can move on to the <li> styling.

ol li {
  counter-increment: custom;
  padding: 15px 0;
  display: flex;
  align-items: center;
}

Here we increment the custom counter and add some essential padding and alignment.

We need to use this counter in a before pseudo element.

ol li:before {
  content: counters(custom, '.') ' ';
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background: purple;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}