Html 您可以设置有序列表编号的样式吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23610151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you style ordered list numbers?
提问by Pixelomo
I'm trying to find a way to style the numbers in a ordered list, I'd like to add background-color, border-radius and color to them so they can match the design I'm working from:
我正在尝试找到一种方法来为有序列表中的数字设置样式，我想为它们添加背景颜色、边框半径和颜色，以便它们可以与我正在使用的设计相匹配：
I'm guessing it's not possible and that I'll have to use different images for each number i.e.
我猜这是不可能的，我必须为每个数字使用不同的图像，即
ol li:first-child{list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');} etc...
I was thinking I could use sprites to make this slightly better but is there any simpler solution?
我在想我可以使用精灵来使这个稍微好一点，但有没有更简单的解决方案？
回答by SW4
You can do this using CSS counters, in conjunction with the :beforepseudo element:
你可以使用CSS counters和:before伪元素来做到这一点 ：
ol {
list-style: none;
counter-reset: item;
}
li {
counter-increment: item;
margin-bottom: 5px;
}
li:before {
margin-right: 10px;
content: counter(item);
background: lightblue;
border-radius: 100%;
color: white;
width: 1.2em;
text-align: center;
display: inline-block;
}<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>回答by Russ
I was looking for something different, and found this example at CodePen;
我正在寻找不同的东西，并在 CodePen 上找到了这个例子；
try this: http://codepen.io/sawmac/pen/txBhK
试试这个：http: //codepen.io/sawmac/pen/txBhK
body {
font-size: 1.2em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 50px;
}
.custom-counter {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom-counter li {
counter-increment: step-counter;
margin-bottom: 5px;
}
.custom-counter li::before {
content: counter(step-counter);
margin-right: 20px;
font-size: 80%;
background-color: rgb(180, 180, 180);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 11px;
}<ol class="custom-counter">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
<li>This is the fourth item</li>
<li>This is the fifth item</li>
<li>This is the sixth item</li>
</ol>