Keeping the Count with CSS
Jeffrey Way shares with us a great CSS tutorial where you can create a counter which is very handy for presentations, using a counter-increment. Sounds unfamiliar? Well, counter-increment has been around for some time, it’s just that we haven’t used this property a lot. You can use this technique in comments section of your blog like if you want to have number for each comment in the set.
Here’s a sample application of the property by Way. Let’s say you have set of boxes, with each box should be displaying a number that corresponds to the order it occurs in its sequence.
.box {
counter-increment: boxes;
}
The code above stores a unique number for each element that has a class of box. If you want to get this number on the page in the future and use content property within standard selectors, you can use pseudo-elements in applying the content.
.box:after {
content: counter(boxes);
}
It will apply a unique number based on the element’s order in the sequence. If you want to reset the order back to 1, use counter-reset: boxes property.
Check out the DEMO.
0
511
