html - 使用 CSS 自定义编号列表

Question

有没有办法控制用于编号的文本？

例如，有没有办法让列表自动执行如下操作:

First,     blah-blahSecond,    blah-blahThird,     blah-blahFourth,    blah-blahetc.

Answer 1

检查这个 fiddle :http://jsfiddle.net/yR6G6/

我们在这里所做的是向每个 LI 添加一个伪 :before 元素并使用 JavaScript 自定义其内容。

注意:此解决方案假定您可以使用 JS 和 jQuery。纯 CSS 解决方案可能根本不可能。

---

HTML

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS

ul li:before {
    content: attr(data-label);
    color: red;
    text-align: right;
    padding-right: 10px;
    font-size: 11px;
    width: 60px;
    display: inline-block;
}

JS

var labels = [
    "First",
    "Second",
    "Third"
    // and so on...    
];

$('ul li').each(function(i) {
    $(this).attr('data-label', labels[i]);
});