Set margin (indent) based on counter value in CSS

css

Solution

For a Small Set

If you are dealing with a small set of `section` elements next to each other (as your sample shows), then using the adjacent sibling selector (or `nth-of-type` if only CSS3 support is desired) will get you what you want without counting. However, probably much more than about five elements and the css could get too cumbersome, so if you are looking at this for hundreds of elements, it is not practical.

section { margin-left: 0}
section + section {margin-left: 1em}
section + section + section {margin-left: 2em}

Problem

I'm wondering whether it is possible to set the element `margin-left` based on the value of a counter, using CSS3. In other words, having a HTML like this: ``` <section>A</section> <section>B</section> <section>C</section> ``` have first block with a `margin-left: 0em`, second one with `1em` and so on. So far, I have tried the following: ``` section { counter-increment: sect-indent; margin-left: calc(counter(sect-indent) * 1em); } ``` But it seems that `calc()` doesn't support getting counter values. Is such a thing possible using CSS3? I'm not interested in solutions involving ECMAScript.

Original source