html - personalizar - quitar viñetas li css

¿Cómo se oculta el punto después del número de viñeta en una lista ordenada?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo se pueden personalizar los números en una lista ordenada? 15 respuestas

Inicialmente, pensé que podía usar: primera letra en CSS, aparte del soporte de navegador heredado, pero no creo que los números de viñeta técnicamente existan en el DOM. Supongamos que no voy a utilizar imágenes de lista de viñetas o imágenes de fondo.

Así que algo como:

1. Las manzanas
2. Plátanos
3. Naranjas

se convertiría

1 manzanas
2 plátanos
3 naranjas

Answer 1

Aquí está tu respuesta de otro post. Pude modificar el violín allí para obtener su respuesta

Formato de lista ordenada personalizada

EDITAR: parece que Sean ya llegó a eso. +1 por su respuesta.

Answer 2

De esta respuesta , parece que la respuesta es:

ol { 
    counter-reset: item;
    list-style-type: none;
}
ol li { display: block; }
ol li:before { 
    content: counter(item) "  "; 
    counter-increment: item;
}

VEA TAMBIÉN : http://jsbin.com/ukojo4/

Answer 3

Un problema de la solución provista por Sean es que pierde la buena alineación de los números.

Otra forma de eliminar los puntos es simplemente esconderlos colocando algo más sobre ellos:

ol li:before {
    content: ".";
    color: #fff;        // color it in white (or whatever background you have)
    float: left;
    font-size: 20px;    // make it bigger.
    font-weight: bold;  // and bolder
    position: absolute; 
    left: 18px;         // horizontal offset
    line-height: 13px;  // vertical offset
}

Es probable que deba jugar con la altura de la izquierda y la línea para colocar los puntos blancos correctamente, dependiendo de sus rellenos y márgenes reales.

Véalo en acción aquí http://jsfiddle.net/HGfty/