How to read the applied css-counter value?

Answer 1

None that I can think of, no. :before pseudo-elements are not part of the DOM so there is no way to address their content.

You could make a function that scanned the stylesheet's DOM for the :before rules and worked out which rules the browser had applied where, but it would be incredibly messy.

Answer 2

I thought about a workaround trying to get the .content value but even that doesn't work because its not been set. Thats really quite shocking. I don't think there actually is any easy way to get this value!

You could calculate it with some disgusting Javascript, but that would blow the whole point of this automatic css styling out the water.

Answer 3

I agree with the others: there is no way of doing that currently. Therefore I suggest you replace CSS-based counters with javascript based ones. It shouldn't be too difficult to write a script in jQuery to perform the same kind of labeling of list items, and then you know what values you inserted. Perhaps you could keep the CSS-based numbering as a fallback in case javascript is disabled in the browser.

Answer 4

var x = document.getElementById("foo");
var y = document.defaultView.getComputedStyle(x, "::before").getPropertyValue(
          "counter-increment");

":before" works for backward compatibility if this doesn't, I don't know current support for "::before".

Clarification: : is pseudo-class & elements in CSS2.1, :: is pseudo-element in CSS3.

You'll probably have to parse out the number with parseInt.

Unfortunately getComputedStyle is a Standards function, which means MSIE does not support this, but FF, Chrome & Safari, and Opera do.