# A Learner’s Exploration of  pseudo elements 2 - Applications: Custom counters with ::before and ::after
Tags: beginners, tutorial, css, html
Published: 2022-01-31 06:20:34


![Finished result of card with custom counter using pseudo elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43jow0zfhccayf4cttp3.png)
*Finished result of card with custom counter using pseudo elements*
<br>
A couple of months ago, I had worked up a pretty decent headache trying to create custom counters for some sections on my page. Recently, on exploring pseudo elements, I discovered a very easy way to achieve custom numbering using the ::before and ::after pseudo element and its been very breezy ever since.

Diving in to how I created the sample above.

The real star in helping us achieve this with pseudo elements is the content property. In my last exploration on this subject, I mentioned that the content property is the ray of sunshine that really helps pseudo elements shine. This particular functionality I’m covering has a heavy dependency on the content property.

Setting up: I have a div container with four H4 elements listing some of the things we can do with ::before and ::after elements. This is not a list but we want to add counters to make it one.

<br>
![HTML set up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68m8baly19i72tmsbeiz.png)

*HTML set up*
<br>
Next we jump into CSS to make the magic happen in a simple couple of steps:

*Note that I have skipped the styling of the main div (.tip-card-body) to only focus on the custom list section.*
<br>
<h3>Step 1</h3><br>
First we declare the ***counter-reset*** property on the container element and set its value to any custom name of our choice, eg cool-counter. 
    
Being a learner, I only just recently found out about this property and its application in achieving our custom list. It is used to initialize a [CSS counter](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) to a given value. It can be used for implicit counters as in ordered lists(ol) and unordered lists (ul), as well as for explicit counters as in author-specified counters (Custom counters like this one we’re making). 
    
As normal counters have a default value of 0, Passing a custom name as the counter-reset value basically tells CSS to set any counter with that name identifier to zero and then count from there. Learn more about the functionality and possibilities of the counter-reset property [here](https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset)
    

<br>
![Resetting the count on containing element.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qah0k3jlb67cm1lpjotr.png)

*Resetting the count on containing element*
<br>
<h3>Step 2</h3><br>
Next select the pseudo-element of the child elements to be numbered or counted, declare a '**content-increment**' property on them and set the value to the name you passed to the counter-reset. Since these elements are contained within our custom defined counter which we specified with the counter-reset, the **counter-increment** property on them will define how the counter’s value is increased or decreased based on their position within the counter. Also, considering we have a left hand counter, the ::before pseudo-element is ideal for this case.
    
    

<br>
![Setting the counter increment value of the elements to be counted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgzyca0w1vyljr82dmi2.png)

*Setting the counter increment value of the elements to be counted*
<br>
Since I want to count the H4 headers in this case, I’ve given all the H4 elements a common class of *count* and targeted the ::before pseudo element of that class. This applies the counter-reset value specified in step 1 to all the spotlighted elements but at the stage, no visible change would’ve happened yet. Fret not. we’ve just got to turn the lights on. That leads us to step 3

<br>
![Card after adding the counter-reset and counter-increment properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkx372agbl30cv042enq.png)

*Card after adding the counter-reset and counter-increment properties*
<br>
<h3>Step 3</h3><br>
Recall from the [last article](https://dev.to/sethearchitect/a-learners-exploration-of-pseudo-elements-intro-5bid) when I said the content property is the breath of life that brings our pseudo elements to life? this is a classic case in point.
    
In this step, we declare the content property on the *.count::before* element, and set its value to a counter function passing the name we specified to the counter-reset property in step one as its parameter. Boom! the magic happens
    

<br>
![declaring the content property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qgifrnv290k9flvziki.png)
<br>
Now, note that its not necessary to declare these properties in the particular order I have followed for this to work. I’ve only done so to highlight the role of the content property in CSS pseudo shadow magic (*Forgive my corny reference but It sounded so cool in my head* 😅).

What you should have now: 


![Numbering becomes visible after the content property is declared](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9xo2j9o54lzwfd8jux5.png)

*Numbering becomes visible after the content property is declared*
<br>
We have our counters visible now but it’s not looking quite awesome is it? Well then, on to step 4.
<br>

<h3>Step 4</h3><br>
Go crazy!    
You can apply other styles to the ::before element to have it looking the exact way you want. For the sample card we’ve been using, these are the rest of the styles I’ve used:
    

<br>
![Other visual styles in creating the final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tiswhbeouzqdspe9uc6u.png)
*Other visual styles in creating the final result*
<br>
If you’re following my example, you might have to tweak the positioning values as necessary because other style factors like the size of your card, margins and paddings, font-sizes and family you use might make your overall card bigger or smaller than mine. 

To see the exact styles I’ve used, checkout the build on [codepen](https://codepen.io/lonelyluci/pen/JjOGoyZ?editors=0100) 

Thanks for reading!