Question

我有一个非常简单的列表

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

我需要使用Step X:启动每个列表。我当然可以手动写出来，但我更喜欢它是由CSS自动构建的。类似的东西：

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

...它可以获取列表位置并将其插入$。理想情况下它也会像这样：

步骤X

步骤内容。这条线上方没有额外的换行符

...但我最需要的是“步骤X”以获得正确的内容。

Answer 1

Counters in 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伪元素（步骤X文本）的样式。除非您将:before显示为块，并且:after伪元素默认显示为内联，否则不会出现换行符。

Answer 2

你的意思是一个柜台吗？

喜欢这个吗？

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);
}

仅当指定了！DOCTYPE时，IE8才支持这些属性。

自定义列表样式的“项目符号”或透明地获取列表编号

步骤X

2 个答案: