CSS Counter and Calc function

Question

I want to know how I can combine the counter css function with the calc function for me to supperpose a list of icons.

    <style>
        .list-counter{
            counter-reset: list;
        }

        .list-counter div:not(:first-child){
            counter-increment: list;
            transform: translateX(calc(counter(list) * -1rem));
        }
    </style>

and the html associated (the css classes used are tailwind classess)

    <div class="list-counter flex items-center justify-center">
        <div class="bg-white overflow-hidden first-of-type: flex justify-center cursor-pointer rounded-full w-10 h-10 border ">
            <img src="" alt="" class="object-cover">
        </div>
        <div class="bg-white overflow-hidden first-of-type: flex justify-center cursor-pointer rounded-full w-10 h-10 border ">
            <img src="" alt="" class="object-cover">
        </div>
        <div class="bg-white overflow-hidden first-of-type: flex justify-center cursor-pointer rounded-full w-10 h-10 border ">
            <img src="" alt="" class="object-cover">
        </div>
    </div>

I tried using css variables an inheritance with no success

    <style>
        .list-counter{
            counter-reset: list;
        }

        .list-counter{
            counter-increment: list;
            --val: counter(list);
        }

        .list-counter div:not(:first-child){
            transform: translateX(calc(var(--val) * -1rem));
        }
    </style>

Answer 1

i think the below can help you :

<style>
  .list-counter {
    counter-reset: list;
  }

  .list-counter div:not(:first-child) {
    --val: calc(-1 * counter(list) * 1rem);
    transform: translateX(var(--val));
  }
</style>

<div class="list-counter flex items-center justify-center">
  <div class="bg-white overflow-hidden first-of-type: flex justify-center cursor-pointer rounded-full w-10 h-10 border">
    <img src="" alt="" class="object-cover">
  </div>
  <div class="bg-white overflow-hidden first-of-type: flex justify-center cursor-pointer rounded-full w-10 h-10 border">
    <img src="" alt="" class="object-cover">
  </div>
  <div class="bg-white overflow-hidden first-of-type: flex justify-center cursor-pointer rounded-full w-10 h-10 border">
    <img src="" alt="" class="object-cover">
  </div>
</div>

In this alternative approach, the --val CSS variable is defined directly within the .list-counter div:not(:first-child) selector. The calc function is used to calculate the value based on the counter value (counter(list)) multiplied by -1rem to achieve the desired translation. The transform property then uses translateX(var(--val)) to apply the translation using the variable value.

Answer 2

You cannot use counter() like this because it returns a string and not an integer like you may think:

The counter() function is generally used within pseudo-element through the content property but, theoretically, it can be used wherever a <string> value is supported. ^ref