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/

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

1 个答案: