Use css counter on before pseudo element inside bootstrap rows and columns in order to count the coordinate values x,y of every column [closed]

Before my css:

<div id="map"><div class="d-flex"><div class="col"><div>...</div></div><div class="col"><div>...</div></div>    ...</div><div class="d-flex"><div class="col"><div>...</div></div><div class="col"><div>...</div></div>    ...</div></div>

I have the above boostrap code.There are several rows and each row has several columns inside of it. I need to count with css counters the coordinates x and y of every column and print them on a pseudo element on every column's :before.This is my css code but unforunately I get value of 0 on every before element.

#map .d-flex {  counter-reset : css-counter 0;  }   #map .col {  counter-increment : css-counter 1;  position          : relative;   }  #map .col:before {  position  : absolute;  content   : counter(css-counter);  bottom    : 10%;  left      : 50%;  transform : translateX(-50%);   }

This is what I see in my result:

This is what I need the end result to be: