Saltar al contenido

HTML + CSS: ¿Lista ordenada sin el punto?

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 ! */
    
    

    ¡Haz clic para puntuar esta entrada!
    (Votos: 0 Promedio: 0)



    Utiliza Nuestro Buscador

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *