在保留缩进的同时，将psuedo元素用于有序列表的样式

Question

I have a situation where the CMS is generating a list of the form

<ul>
    <li>
        <a>Here's list item 1, which will wrap onto the next next due to the size of the ul element containing it</a>  
    </li>
    <li>
        <a>Here's list item 2, which will wrap onto the next next due to the size of the ul element containing it</a>          
    </li>
    <li>
        <a>Here's list item 3, which will wrap onto the next next due to the size of the ul element containing it</a>          
    </li>
</ul>

and I need the client wants the list style to be '>' 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 li and li:before elements, but can't get it right.

Here's a fiddle of the scenario:

http://jsfiddle.net/t0wxsf0j/

Answer 1

Could you give your pseudo element a negative margin:

ul > li:before {content: ">";margin-left:-.8em;}

http://jsfiddle.net/t0wxsf0j/1/