Los estilos de las listas pueden manejarse gracias a la propiedad list-style. La misma nos permite modificar la imagen de la lista, la posicion de la lista y el tipo de la misma. Un ejemplo de su estructura:

list-style: square inside url(”imagendelista.svg”)

Cual es el tipo de lista

Cual será la posición de la lista

Cual es la imagen de la viñeta

Tipo de lista

El tipo de lista indica como serán los tipos de listas reflejados en las viñetas de las mismas. Existen varios tipos de listas, pero aqui están algunos ejemplos

• list-style:disc

  

  Aspecto tradicional de viñetas

• list-style:georgian;

  

  Viñetas en georgiano

• list-style:decimal;

  

  Viñetas ordenadas numericamente

• list-style:trad-chinese-informal;

  

  Viñetas en chino

• list-style:circle;

  

  Viñetas con circulos vacios adentro

Counter-style

La regla counter-style nos permite crear nuestro propio formato de viñetas. Lo declaramos como si fuera un media query, de la siguiente forma

@counter-style listado{
	system:numeric;
	symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
}

Gracias a los counter-styles podemos modificar sistema de lista, simbolo, prefijos, sufijos hasta como lo leera un lector de pantalla. Podes aprender las diferentes formas de poder modificar una lista gracias a counter-style en https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style.

Posición de lista

La posición de la lista se refiere a solo dos variables: si la viñeta se encuentra dentro del contenedor de la lista o si se encuentra por fuera. Por lo tanto los dos valores validos para esta propiedad es inside u outside.

Asi se ve outside

La viñeta se encuentra fuera del contenedor de los elementos de la lista