title: Using psuedo elements for the style of an ordered list, while preserving indentation
body: <p>I have a situation where the CMS is generating a list of the form</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a&gt;Here's list item 1, which will wrap onto the next next due to the size of the ul element containing it&lt;/a&gt;  
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a&gt;Here's list item 2, which will wrap onto the next next due to the size of the ul element containing it&lt;/a&gt;          
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a&gt;Here's list item 3, which will wrap onto the next next due to the size of the ul element containing it&lt;/a&gt;          
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and I need the client wants the list style to be <code>'&gt;'</code> characters and be a different color than the text. So I decided to use the classic pseudo-element hack, but now the problem is that I want the text to be aligned when it wraps to the next line, as in normal lists. I've tried seemingly every combination of padding/text-indent/margin over the <code>li</code> and <code>li:before</code> elements, but can't get it right. </p>
  
  <p>Here's a fiddle of the scenario: </p>
  
  <p><a href="http://jsfiddle.net/t0wxsf0j/" rel="nofollow">http://jsfiddle.net/t0wxsf0j/</a></p>