Cómo personalizar listas HTML con CSS

Centrar una lista en HTML 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>Lenguaje del código: HTML, XML (xml)

Código CSS

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

.centrar-listas ul,
.centrar-listas ol {
	text-align: left;
	display: inline-block;
}Lenguaje del código: PHP (php)

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>Lenguaje del código: HTML, XML (xml)

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
}Lenguaje del código: PHP (php)

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.

También podemos sustituir la viñeta de los elementos de una lista desordenada por una imagen.

Para ello, en el atributo content del pseudo elemento ::before indicamos la URL de dicha imagen, desactivando antes el estilo de lista por defecto, o usamos la propiedad list-style-image que permite usar una imagen personalizada para la viñeta.

Sin embargo, estos dos métodos son muy limitados en lo que respecta al control del tamaño y posición de la viñeta.

En este caso es más conveniente usar la familia de propiedades background.

Por ejemplo:

div.lista-imagen li {
	padding-left: 2rem;
	background-image: url((https://joseramonbernabeu.com/wp-content/uploads/2020/12/020-maintenance.svg);
	background-position: 0 50%;
	background-size: 1.3rem 1.3rem;
	background-repeat: no-repeat;
}Lenguaje del código: PHP (php)

Cuyo resultado es:

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>Lenguaje del código: HTML, XML (xml)

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;
}Lenguaje del código: CSS (css)

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.

Listas numeradas en orden inverso

También podemos crear una lista ordenada de forma descendente con el elemento <ol reversed>.

<ol reversed>
	<li>Elemento 1</li>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
	<li>Elemento 4</li>
</ol>Lenguaje del código: PHP (php)

Y, por supuesto, podemos combinar varias personalizaciones.

• 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.