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

Question

我遇到CMS正在生成表单列表的情况

<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>

我需要客户希望列表样式是'>'字符并且与文本不同的颜色。所以我决定使用经典的伪元素 hack，但现在的问题是我希望文本在换行到下一行时对齐，就像在普通列表中一样。我似乎尝试了li和li:before元素上的填充/文本缩进/边距的所有组合，但无法正确。

下面是一个场景的小提琴：

http://jsfiddle.net/t0wxsf0j/

Answer 1

你能给你的伪元素一个负边距吗：

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

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