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: counter(my-awesome-counter);
}Each <section> will respectively start with “1”, “2”, “3”, or “4”.
You can control the style of the counter by comma separating the counter function. e.g. to make them use Roman numerals:
section:before {
content: counter(my-awesome-counter, upper-roman);
}Demo
More Information
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 3.1+ | Any | 9.2+ | 8+ | TBD | TBD |
The guy drove home without paying for the skirt steak! haha
hmm it looks like Android and iOS has a good support too.
caniuse.com
Event without script we can change number of li with counter-increament
I have edited your code a bit so it is actually working.
You have to move counter-increment property from li:before to li itself. Also in counter-reset property you cannot use commas, just spaces to separate values.
@transGLUKator Thanks for the note.
But can you explain why the article demo as the counter reset value seperated by commas ?
Is it possible to use it like this:
I can’t get it working, would be nice if it would work that way also.
I’m almost certain that ‘counter’ only works within the ‘content’ property on pseudo elements (e.g. ::before, ::after)
is there any technique or advice on how to make the counters clickable links? I can’t see how but I’ve been asked to do so on an already established design.
Couldn’t you just wrap it up inside an anchor tag?
<a class="counter-link"><a/>Then in your css, try something like..
I’ve run into an issue where I have code like so:
This works no problem on page load. The problem I’m running into is whenever I hover over .MarkerLabel, it seems to be inserting an additional ::before pseudo element inside the .MarkerLabel. So I end up with the original ::before pseudo element that has a counter value of 1 and then when I hover, a second pseudo element appears with a counter value (in this case) of 54, like it’s doing it all over again on hover. Make no sense to me. Anyone else run into issues with :hover and the CSS counter?
It was an issue with the Google Maps API rendering two sets of markers. So I just limited the counter to the first set of .MarkerLabels.
Here is youtube video tutorial, i explained this in little detail with examples. :)
https://goo.gl/Jw2TDD
There’s a big undocumented aspect to using multiple CSS counters which this pen demonstrates https://codepen.io/A2D/pen/WdKjRa
That’s neither how I expected it to work, nor how I think it should work.