Generating a list of numbers in CSS using pseudo selectors

CSS IS AWESOME.

There, I just said it. HAHA.

At my internship with Coverfox, I was tasked with building an Emailer that had 3 steps outlined in it. It looked something like this:

The way I saw it, I wanted to build a list and then use list-style-type: decimal; to get the numbers. But at the time, I had no clue how to style it. I don't know how to style it now as well. And so I put the numbers in a :before pseudo selector and then in the :after pseudo selector, I added the background color and got what was needed.


......
.list {
 list-style: none;
 padding: 22px;
}


.list:before {
 padding: 5px 12px;
 background-color: #FF704C;
 border-radius: 50%;
 color: #fff;
 font-size: 22px;
 margin-right: 18px;
}

 
.one:before {
 content: "1";
}

 
.two:before {
 content: "2";
}

 
.three:before {
 content: "3";
}
.....

Now that I look at it, it was a bad way to achieve the result. If you want to add a list of 100 numbers, you'd have to add 100 unique classes and repeat the CSS 100 times. Talk about keeping things DRY.

CSS has this handy propery called counter-reset and counter-increment. This property will generate numbers for us that can then be used in the content. One property to generate limitless numbers using CSS. Sounds great right?

counter-reset^[0] resets a CSS counter to a given value while counter-increment^[1] increases or decreases the value of a CSS counter by a given value.

The following will be my markup:

<ul class="wrapper"> <li class="counter"> Content One </li> <li class="counter"> Content Two </li> <li class="counter"> Content Three </li> </ul>

Using this css, we can generate a list of numbers.

 
.wrapper {
 display: flex;
 justify-content: center;
 align-items: center;
 counter-reset: number;
}
.counter {
 counter-increment: number;
 text-align: center;
 position: relative;
 margin: 0 12px;
}
.counter:before {
 content: counter(number)" ";
 color: #000000;
}
.counter:after {
 content: "";
 
 // background styles can be
 // written here to add a
 // background color to
 // the numbers.

}

This way, we can add any number of list items in the markup without having to worry about writing extra css.

MDN Links: ^[0] counter-reset ^[1] counter-increment

Shreyas Jani

Generating a list of numbers in CSS using pseudo selectors