title: How can I color an OL's number separately from its content without using pseudo-elements?
body: <p><strong>I've already looked at <a href="https://stackoverflow.com/questions/76564/is-there-an-easy-way-to-change-the-color-of-a-bullet-in-a-list">Is there an easy way to change the color of a bullet in a list?</a>. This question's answers do not help me, as I have no control over the HTML structure. This is for a CSS library, not a particular webpage or site.</strong></p>
  
  <p>Let's say I have the following code:</p>
  
  <pre><code>&lt;style&gt;
  * {
      background-color: white;
      color: black;
  }
  #too {
      background-color: black;
      color: white;
  }
  &lt;/style&gt;
  &lt;ol&gt;
      &lt;li id="won"&gt;Item 1&lt;/li&gt;
      &lt;li id="too"&gt;Item 2&lt;/li&gt;
      &lt;li id="tre"&gt;Item 3&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>The second list element is supposed to be highlighted by inverting the background and foreground colors, but in doing this, the number for the item is also changed in this case.</p>
  
  <p><strong>Is there any way I can do this while keeping the number for item 2 its initial color?</strong> I've seen solutions with the <code>::before</code> pseudo-element and the <code>content</code> CSS attribute, but these do <em>not</em> work with the HTML5 <code>value</code> attribute for <code>li</code> elements.</p>
  
  <p>Whatever answer you give, it should be semantic with current CSS3. This is because the final implementation will use <code>:target</code> to highlight the target element, and thus the HTML structure is not guaranteed.</p>