Listas y bullets

Cuando se crean listas HTML, por defecto, estas incluyen un bullet (etiqueta UL) o un número (etiqueta OL) que se muestra a la izquierda del texto de cada item y cuyo estilo es controlado por la propiedad list-style-type cuyos valores básicos son disc y decimal respectivamente. Si no queremos que se vean, usamos el valor none y desaparecen.

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

Una característica de las listas es que ese bullet o número comparten el estilo gráfico del contenido es decir, de la etiqueta LI; si esta tiene una fuente "grande" o cierto color, esas propiedades también se aplican a la "decoración" por lo tanto, de modo normal, no es posible diferenciarlas:

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

En Firefox hay dos pseudo-clases especiales que puede usarse para controlar eso:

::-moz-list-bullet permite establecer el estilo del bullet de las etiquetas LI en una lista desordenada (UL)
::-moz-list-number permite establecer el estilo del número o texto de las etiquetas LI en una lista ordenada (OL)

Por ejemplo:

ul li {color: #FFF; font-size: 16px;}
ul li::-moz-list-bullet{color: Yellow; font-size: 25px; vertical-align: middle;}
ol li {color: #FFF; font-size: 16px;}
ol li::-moz-list-number{font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

En cualquier otro navegador, no queda más remedio que agregar una etiqueta extra:

<li><span>item 1</span></li>

Y crear reglas de etilo diferentes:

ul li {color: Yellow; font-size: 25px; line-height: 0.9;}
ul li span {color: #FFF; font-size: 16px;}
ol li {font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}
ol li span {color: #FFF; font-size: 16px; font-style: normal; font-family:Trebuchet MS;}

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5