Finished result of card with custom counter using pseudo elements
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.
HTML set up
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.
Step 1
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 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
Resetting the count on containing element
Step 2
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.
Setting the counter increment value of the elements to be counted
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
Card after adding the counter-reset and counter-increment properties
Step 3
Recall from the last article 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
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
We have our counters visible now but it’s not looking quite awesome is it? Well then, on to step 4.
Step 4
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:
Other visual styles in creating the final result
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
Thanks for reading!
Top comments (0)