Question

I am using CSS2.1 counters to apply numbers to men on the board in the implementation of a board game whose board diagrams use HTML and CSS, by doing something like:

.ply  {counter-increment:main;}
.move:before {content:counter(main);}

With HTML structured as

<ply>
  <move...>
  <ply>
    <move...>
  </ply>
</ply>

All this works fine, but I would like to conditionally style the counter value differently if it’s two digits in length (squeeze the two digits together with a negative letter-spacing, for example). Any ideas about how to do this or workarounds?

Answer 1

It turns out that we can retrieve the value of the counter in question with getComputedStyle, using the second argument which specifies the pseudo-element for which the counter was specified as the content:

value = window.getComputedStyle(elt, ':before').content;

Then we can apply a style such as

if (value>=100) { elt.style.letterSpacing = "-2px"; }

Which is what we want, although it requires traversing all the potentially affected elements with JS whenever they might have changed.