No dudes en compartir nuestra página y códigos en tus redes, necesitamos de tu ayuda para hacer crecer nuestra comunidad.
Solución:
Esto es perfectamente posible de hacer solo con CSS (2.1):
ol.custom
list-style-type: none;
margin-left: 0;
ol.custom > li
counter-increment: customlistcounter;
ol.custom > li:before
content: counter(customlistcounter) " ";
font-weight: bold;
float: left;
width: 3em;
ol.custom:first-child
counter-reset: customlistcounter;
Tenga en cuenta que esta solución se basa en el pseudo-selector :before, por lo que algunos navegadores antiguos, IE6 e IE7 en particular, no mostrarán los números generados. Para esos navegadores, querrá agregar una regla CSS adicional que se dirija solo a ellos para usar el estilo de lista normal:
ol.custom
*list-style-type: decimal; /* targets IE6 and IE7 only */
aquí está la solución
Número de listas ordenadas anidadas en HTML
Todo lo que tienes que hacer es cambiar un poco aquí
ol li:before
content: counter(level1) " "; /*Instead of ". " */
counter-increment: level1;
^^
Acabo de encontrar una solución para los casos en los que simplemente desea eliminar el punto. No es la mejor solución, pero está hecha solo con CSS y funciona en todos los navegadores. La desventaja es que necesita que el nodo de texto en LI esté envuelto en otra etiqueta ( o algo). En mi propio caso, el
- se usó como una lista de enlaces, por lo que podría usar mi etiquetas!
El CSS que utilicé:
ol li a
float: right;
margin: 8px 0px 0px -13px; /* collapses and dots */
padding-left: 10px; /* gives back some space between digit and text beginning */
position: relative; z-index: 10; /* make the appear ABOVE the dots */
background-color: #333333; /* same background color as my ol ; the dots are now invisible ! */