ver sacar saber que numero negra mensajes los llamadas lista estoy eliminar desbloquear como celular html css html-lists sprite

html - sacar - ¿Puedes darle estilo a los números de lista ordenados?



lista negra celular (2)

Estaba buscando algo diferente, y encontré este ejemplo en CodePen;

intente esto: 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>

Estoy tratando de encontrar una manera de dar estilo a los números en una lista ordenada, me gustaría agregarles color de fondo, radio de borde y color para que coincidan con el diseño del que estoy trabajando:

Supongo que no es posible y que tendré que usar diferentes imágenes para cada número, es decir

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

Estaba pensando que podría usar sprites para hacer esto un poco mejor, pero ¿hay alguna solución más simple?


Puede hacer esto usando contadores CSS , junto con :before pseudo elemento:

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>