Change the number in a scatter chart with CSS

Hi,

I'm trying to replace the data labels in a scatter chart with consecutive numbers with CSS.

As an example, I can use the below CSS to insert an "after" pseudo-element right after the actual value. If I do this, it should display first the original value, and then the inserted value, however only the original value is displayed even though I can see the ::after tag in the HTML.

If I create a blank HTML page and do a similar construction, this works fine - see the Fiddle link.

I've tried looking around in the CSS, but I can't seem to find anything that should be blocking this.

Any ideas?

<CSS_Code>

     #UIComp_1 > svg > g.v-m-main > g.v-m-plot > g > g.v-m-datalabel > g > g:nth-child(1) > text:after {

          content: '1';

     }

</CSS_Code>

Fiddle link to example: http://jsfiddle.net/nsuu3q83/1/

I'm using DS 1.5 and have tried both IE and Chrome. The dashboard is a clean one, only containing a data source and the scatter chart.

Regards,

Kris