@transGLUKator Thanks for the note.

But can you explain why the article demo as the counter reset value seperated by commas ?

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.

#map { counter-reset: markerLabel; }
#map .MarkerLabel {

    counter-increment: markerLabel;

    &::before {  content: ~"counter(markerLabel)";  }
    &:hover {  /* stuff */ }

}

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?

Couldn’t you just wrap it up inside an anchor tag?

<a class="counter-link"><a/>

Then in your css, try something like..

.counter-link {
    &::before {
        content: counter(NAME_OF_COUNTER);
    }
}

I’m almost certain that ‘counter’ only works within the ‘content’ property on pseudo elements (e.g. ::before, ::after)

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.

div:nth-child(counter(item)) {
    z-index:counter(item);
}

I can’t get it working, would be nice if it would work that way also.

caniuse.com