You can use CSS to append or prepend numbers to the beginning or end of elements to make it easy for you to count element son your page.

Do you have a website that contains a lot of lists or possibly your just making the one list and would like to make it as stylish as possible while still keeping scripting down to a minimum? Read ahead and you’ll learn an easy way to count elements on your page then append or prepend text to those elements allow you to give them numbers or captions easily!

HTML

First we’ll want to create your HTML list, we can use the below as a sample to get us started.

<p>List Item 1</p>
<p>List Item 2</p>
<p>List Item 3</p>
<p>List Item 4</p>

CSS

Now it’s time for the CSS part! First we’ll want to reset your counter on the page.

body {
counter-reset: steps;
}

Then we’ll want to select where we want to start the increment of our step counter as well as append or prepend the text to add to that element. We’ll want to use the pseudo element :before or :after to our p element.

p:before {
counter-increment: steps;
content: "Step " counter(steps) ": ";
}

And that’s it! How easy was that. Our finish result looks like this

Step 1: List Item 1
Step 2: List Item 2
Step 3: List Item 3
Step 4: List Item 4