CSS：有没有什么方法可以设置<ol>子弹的样式，使其成为圆形并具有背景？</ol>

Question

DEMO展示了我所坚持的东西和我想要的东西，我只能通过手动添加标签来实现：

http://jsfiddle.net/8nFEk/

屏幕截图示例：

<ol class="arabic">
<li>Step One</li>
</ol>

ol.arabic {
list-style: decimal;
}

Answer 1

当然，重置默认样式并使用各种counter样式modifications：

<强> jsFiddle example

ol.arabic {
    list-style-type: none;
    counter-reset: ol-counter;
}
ol.arabic > li:before {
    content: counter(ol-counter);
    counter-increment: ol-counter;
    color: white;
    background: #452073;
    border-radius: 140px;
    font-weight: 700;
    width: 30px;
    height: 30px;
    position: relative;
    font-size: 18px;
    line-height: 28px;
    text-indent: 0px;
    text-align: center;
    display: inline-block;
    margin-right:4px;
}