如何在CSS中设置OL数字的样式

Question

我正在尝试查看我的订单列表项目，我现在想知道如何实现以下效果，如果它甚至可以在纯CSS中使用：

是否可以在CSS中更改数字点和样式，如果是这样，怎么样？

Answer 1

是的，这可以通过:before伪元素和CSS counter-increment的组合实现。

HTML：

<ol>
    <li>Lorem</li>
    <li>Lorem</li>
</ol>

CSS：

ol {
    counter-reset: li;
}

li {
    position: relative;
    list-style-type: none;
}

/* Style the before element how you want, the important bits here are the content element and counter-increment */
li:before {
    width: 1.75em;
    height: 1.75em;
    position: absolute; left: 0;        
    margin-right: 12px;       
    content: counter(li);
    counter-increment: li;
}