你可以风格有序的列表号码？

我试图find一种方式来设置有序列表中的数字，我想为它们添加背景颜色，边框半径和颜色，以使它们可以匹配我正在工作的devise：

我猜这是不可能的，我将不得不为每个数字使用不同的图像，即

ol li:first-child{list-style-image:url('1.gif')}; ol li:nth-child(2) {list-style-image:url('2.gif');} etc...

我以为我可以使用精灵来使这个稍微好一点，但有没有更简单的解决scheme？

Answer 1

您可以使用CSS计数器与:before伪元素结合使用：

  body { counter-reset: item; } ol { list-style: none; } 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> 

Answer 2

我正在寻找不同的东西，并在CodePen上find了这个例子。

试试这个： 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>