All geek questions in one place

CSS Use the value of counter () as the value of the property.

Let's say I want to increase the margin-top element by its index using the increment counter() . Sort of:

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

Obviously this does not work, but I could not find any information if it could be used in any way. They did not find what stated that it was impossible to do, so I thought ...

Since counters are essentially variables supported by css, is there any way to use the number of CSS counters as a property value?

EDIT

The supposed duplicate ( Set margin (indentation) based on the counter value in CSS ) does not give an answer whether this is or is impossible, and why. He just offers a different approach.

+6
source share
1 answer

It works only inside the content property, and not as a variable, as you think about it. If you view it in DevTools or the like, this is not an integer. You will still see counter(myCounter) .

"In CSS 2.1, counter values ​​can only be attributed to the content property. Source

+2
source

Source: https://habr.com/ru/post/976013/

More articles:


All Articles