html - 使用伪元素作为有序列表的样式，同时保留缩进

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 元素上尝试了 padding/text-indent/margin 的所有组合，但无法正确处理。

这是场景的 fiddle :

http://jsfiddle.net/t0wxsf0j/

Answer 1

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

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

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