Adjacent sibling selectors and :before pseudo element in Chrome 10

This is a weird one. The <OL> on http://www.madebypaz.com/profile uses the :before pseudo element for the annotations of the chart (ABC and image). I use adjecent sibling selectors for this like so:

#profiletext ol li:before {
    content: 'A';
    }

#profiletext ol li+li:before {
    content: 'B';
    }

#profiletext ol li+li+li:before {
    content: 'C';
    }

#profiletext ol li+li+li+li:before {
    content: '';
    }

#profiletext ol li+li+li+li {
    background: url('/wp-content/themes/paz2010/images/sweet-spot.png') no-repeat;
    margin-left: 0;
  开发者_运维问答  padding-left: 38px;
    }

#profiletext ol li {
    height: 30px;
    margin-left: 10px;
    }

This is probably not the most elegant solution, but it worked perfectly in all browsers including Chrome until someone pointed out to me that it breaks in Chrome 10. In Chrome 10 it displays AAA and changes to the right character when you mouse over. This is curious because there isn't even a :hover style defined!

Here's a screen recording of this: http://cl.ly/0E170v1Z0O2E0f3F0j0d

Why this is happening and how can I fix it? Is there a better way to achieve the same result?

Any pointers greatly appreciated!

---

This works as expected on Chrome 16 - a simple update is required.