CSS：有什么方法可以设置 <ol> 项目符号的样式，使其成为圆形并有背景？ [复制]

Question

演示我坚持什么以及我想要什么，我只能通过手动添加标签来做到这一点：

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