Cómo personalizar listas HTML con CSS

Centrar una lista por CSS no es tan fácil como parece.

Si intentas aplicar lo obvio, (centrar el texto con text-align: center;) verás que los puntos de las listas desordenadas o los números de las ordenadas quedan separados y el texto centrado.

Tal que así:

Desde luego no es el resultado que buscamos, así que vamos a usar unas líneas de CSS para arreglarlo.

Crea una clase llamada, por ejemplo, centrar-listas y aplica en ella el centrado del texto.

Después aplica al elemento <ol> o <ul> con dicha clase alineamiento a la izquierda y display: inline-block;.

Código HTML

<div class="centrar-listas">
	<ul>
		<li>En un lugar de la Mancha,</li>
		<li>de cuyo nombre no quiero acordarme,</li>
		<li>no ha mucho tiempo que vivía un hidalgo</li>
		<li>de los de lanza en astillero,</li>
		<li>adarga antigua,</li>
		<li>rocín flaco y galgo corredor.</li>
	</ul>
</div>

<div class="centrar-listas">
	<ol>
		<li>Una olla de algo más vaca que carnero,</li>
		<li>salpicón las más noches,</li>
		<li>duelos y quebrantos los sábados,</li>
		<li>lantejas los viernes,</li>
		<li>algún palomino de añadidura los domingos,</li>
		<li>consumían las tres partes de su hacienda.</li>
	</ol>
</div>

Código CSS

.centrar-listas {
	text-align: center;
}

.centrar-listas ul,
.centrar-listas ol {
	text-align: left;
	display: inline-block;
}

Resultado

Las listas desordenadas en HTML son aquellas que muestran sus elementos precedidos de un símbolo, conocido como viñeta.

Podemos definir el tipo de viñeta empleada para cada elemento.

Para ello debemos especificarlo por medio del atributo type dentro de la etiqueta de <ul>, si queremos que el estilo sea válido para toda la lista, o dentro le la etiqueta <li> si queremos hacerlo específico de un solo elemento.

Por ejemplo:

• Elemento 1
• Elemento 2
• Elemento 3
• Elemento 4

Cuyo código sería:

<ul type="square"> 
	<li>Elemento 1 </li>
	<li type="disc">Elemento 2 </li>
	<li>Elemento 3 </li>
	<li type="circle">Elemento 4 </li>
</ul>

Por defecto, podemos elegir entre tres tipos de viñeta para las listas desordenadas en HTML:

• Disc
• Circle
• Square

Pero, a través de CSS, podemos modificar las viñetas que preceden a cada elemento de la lista, cambiando su color, el símbolo o ambas cosas.

Para ello, lo que haremos es desactivar las viñetas por defecto y definir después qué símbolo vamos a utilizar.

div.lista-azul li {
	list-style: none;
}

div.lista-azul li::before {
	content: "►";
	color: blue;
	display: inline-block;
	width: 1em;
	margin-left: -1em
}

Por supuesto, queremos que los cambios se apliquen solo donde nos interese y no a todas las listas que podamos utilizar en nuestro sitio web.

Por lo tanto, creamos la correspondiente clase, en este caso lista-azul, desactivamos el estilo de lista por defecto con list-style: none y aplicamos la nueva viñeta, con sus características, mediante el pseudoelemento ::before del selector li.

ul li::before {
	content: "😁 " 
}

.lista-ok li::before {
  content: "👍 ";
}

.lista-corazon li::before {
  content: "❤ ";
}

Al igual que con las listas desordenadas, también podemos personalizar los numeradores de las listas numeradas con CSS.

Para ello usaremos los contadores CSS, que son variables cuyos valores se pueden incrementar mediante reglas CSS.

Para trabajar con contadores CSS usaremos las siguientes propiedades:

• counter-reset - Crea o reinicia un contador
• counter-increment - Incrementa un valor de contador
• content - Inserta contenido generado
• counter() o counters(): Función que agrega el valor de un contador a un elemento

Digamos que queremos crear la siguiente lista numerada personalizada:

Código HTML

Creamos dos <div> en cada uno de los cuales incluimos una lista numerada, asignándoles a cada cual una clase:

<div class="lista-numerada-1">
	<ol>
		<li>Elemento 1</li>
		<li>Elemento 2</li>
		<li>Elemento 3</li>
		<li>Elemento 4</li>
	</ol>
</div>

<div class="lista-numerada-2">
	<ol>
		<li>Elemento 6</li>
		<li>Elemento 8</li>
		<li>Elemento 10</li>
		<li>Elemento 12</li>
	</ol>
</div>

Código CSS

Para cada una de las listas ordenadas definimos un contados con counter-reset y establecemos el incremento a aplicar con counter-increment.

Anulamos el numerador por defecto con list-style: none; e indicamos el contenido y propiedades de las nuevas viñetas con el pseudoelemento ::before de los elementos de lista.

.lista-numerada-1 ol {
	list-style: none;
	counter-reset: contador1;
}
.lista-numerada-1 ol li {
	counter-increment: contador1;
}

.lista-numerada-1 ol li::before {
	content: counter(contador1) ". ";
	color: red;
	font-weight: bold;
}

.lista-numerada-2 ol {
	list-style: none;
	counter-reset: contador2 4;
}
.lista-numerada-2 ol li {
	counter-increment: contador2 2;
}

.lista-numerada-2 ol li::before {
	content: counter(contador2) ") ";
	color: blue;
	font-weight: bold;
}

Al crear un contador con counter-reset podemos indicar el valor inicial, que será 0 de no hacerlo.

También podemos establecer el valor del incremento de counter-increment con un número. Si no indicamos nada , el incremento será 1.

Párrafos famosos

• Quijote
  1. En un lugar de la Mancha,
  2. de cuyo nombre no quiero acordarme
• Chiquito
  • Por la gloria de mi madre,
  • está la cosa muy malar.

<style type="text/css">
	.lista-azul li {
		list-style: none;
	}

	.lista-azul li::before {
		content: "►";
		color: blue;
		display: inline-block;
		width: 1em;
		margin-left: -1em
	}
</style>

<div><strong>Párrafos famosos</strong>
<ul>
	<li type="square"><em>Quijote</em>
		<ol>
			<li>En un lugar de la Mancha,</li>
			<li>de cuyo nombre no quiero acordarme</li>
		</ol>
	</li>
	
	<li><em>Chiquito</em>
		<ul class="lista-azul">
			<li>Por la gloria de mi madre,</li>
			<li>está la cosa muy malar.</li>
		</ul>	
	</li>
</ul>
</div>