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

我正在尝试整理我的订单列表项目，现在我想知道如何实现以下效果，以及在纯CSS中是否可行：

---

是否可以仅在CSS中更改数字点和样式，如果可以，如何更改？

是的，这可以通过组合

：before

伪元素和

HTML：

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

---

这里已经讨论过了：当我搜索时没有看到。使用背景图像不是一个解决方案，因为当数字的长度大于图像的宽度时，你就被填满了。谢谢Jamie，但这在IE 11中完全失败了。数字与每个列表项的第一个字母重叠。而且也没有其他样式。@jay_t55当然，那是因为我的示例中没有包含任何样式，我只是给了您使其工作的代码。风格李：之前以任何你想要的方式，所以看你的问题，你可以添加一个背景色，50%的边界半径等。哦，对不起，我完全忘记了。我需要多睡一会儿。我现在就要做了。：）@别担心，我们都去过！只是有点乱，我在那里弄了些圈圈。谢谢@Jamie.）现在我只需要再调整一下。

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