0

我有一个非常简单的清单

<ol>
    <li>item 1</li>
    <li>item 2</li>
</ol>

我需要从每个列表开始Step X:。我当然可以手动写出来，但我更喜欢它是由 CSS 自动构建的。就像是：

ol li:before {
    content: "Step $";
}

...它可以获取列表位置并将其插入到$. 理想情况下，它也应该是这样的：

第十步

步骤的内容。此行上方没有额外的换行符

...但我最需要的是“Step X”来获得正确的内容。

4

2 回答 2

1

CSS2.1 中的计数器：

ol {
    counter-reset: step;
}

ol li:before {
    counter-increment: step;
    content: "Step " counter(step);
    /* You may need to add : and/or space, e.g. "Step " counter(step) ": "; */
}

不错的浏览器支持（IE8+ 和所有其他主流浏览器），您仍然可以:before单独设置伪元素（Step X 文本）的样式。除非您显示为块，否则不会出现换行符，:before并且:after伪元素默认显示为内联。

于 2013-02-25T17:10:18.537 回答
1

你是说柜台吗？

像这样？

Step 1 bla bla bla
Step 2 bla bla bla

如果是这样...

<body>
    <ol>
        <li></li>
        <li></li>
    </ol>
</body>

和 CSS：

body 
{
    counter-reset: stepx;
}
li:before
{
    counter-increment: stepx;
    content: "Step "counter(stepx);
}

IE8 仅在指定了 !DOCTYPE 时才支持这些属性。

于 2013-02-25T17:13:26.920 回答