CSS - Use counter() number as property's value

Question

Say I want to increment the margin-top of an element according to it's index, using a counter() increment. Something like:

div {
    margin-top: calc(counter(myCounter) * 10px);
}

Obviously the above doesn't work, but I couldn't find any info if it somehow can be used. Neither found something that stated it can't be done, so I wondered...

Since counters are essentially variables mantained by css, is there any way I can use a CSS counter number as the value of a property?

EDIT

The supposed duplicate (Set margin (indent) based on counter value in CSS) does not provide an answer whether it is or isn't possible, and why. It simply suggests another approach.

Answer 1

It only works inside the content property, not like a variable the way you are thinking of it. If you view it in DevTools or the like, it's not an integer. You'd still see counter(myCounter) in there.

"In CSS 2.1, the values of counters can only be referred to from the 'content' property." source