HTML + CSS: lista ordenada sin el período?

Creo que la respuesta a esta pregunta es no … pero ¿alguien sabe de una forma HTML / CSS para crear una lista ordenada sin un período después de los números? O, como alternativa, ¿para especificar el carácter separador?

Idealmente, no quiero hacer una lista de estilo de la lista con una clase diferente para cada número, pero eso es todo lo que he podido pensar hasta ahora … Parece terriblemente no semántico.

ES DECIR:

Default Style: 1. ______ 2. ______ 3. ______ Desired Style: 1 ______ 2 ______ 3 ______ Alternate Style: 1) ______ 2) ______ 3) ______ 

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 depende del pseudoselector anterior, por lo que algunos navegadores más antiguos, IE6 e IE7 en particular, no mostrarán los números generados. Para esos navegadores, querrá agregar una regla de CSS adicional que solo se dirija 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 el texto en el LI para ser envuelto en otra etiqueta ( o algo así). En mi caso, el

    se usó como una lista de enlaces, ¡así que podría usar mis tags !

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

Puede agregar los números más tarde usando jQuery:

 $("ul").each(function() { $(this).find("li").each(function(index) { $(this) .css("list-style-type", "none") .prepend("
" + (index + 1) + "
"); }) })

Prueba la muestra aquí .

Más información sobre jQuery aquí .

Parece que estás jodido con los períodos 🙂 Creo que la única manera es construyendo la lista por ti mismo con