Animating Number Counters
Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for …
Carter Li
on
Articles Tagged
counters
6 Articles
Displaying the Current Step with CSS Counters
Say you have five buttons. Each button is a step. If you click on the fourth button, you’re on step 4 of 5, and you want to display that.
This kind of counting and displaying could be hard-coded, but that’s …
Jan Enning
on
(Updated on )
How to Reverse CSS Custom Counters
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:
5. Post Title
4. Post Title
3. Post Title
2. Post Title
1. Post TitleBut the above …
Using CSS Counters for Custom List Number Styling
How about a classic CSS trick! Getting custom styling on lists isn’t even so tricky anymore, since CSS counters have introduced counter-increment and counter-reset, and that is perfect for this. I just wanted to make sure you knew how …
Chris Coyier
on
(Updated on )
Counting With CSS Counters and CSS Grid
In this post, we're going to demonstrate how we can use the source order independence of CSS Grid to solve a layout issue that's the result of a source order constraint. Specifically, we're going to look at checkboxes and CSS Counters—two concepts that rely on source order when used together.
Preethi
on
(Updated on )
counter-increment
Ordered lists aren’t the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be.
<body>
<section></section>
<section></section>
<section></section>
<section></section>
</body>body {
counter-reset: my-awesome-counter;
}
section {
counter-increment: my-awesome-counter;
}
section:before {
content: 
Sara Cope
on
(Updated on )
Our Learning Partner
Frontend Masters
