[TUTORIAL] Cómo personalizar listas HTML con CSS

Podemos distinguir tres tipos de listas HTML:

Listas desordenadas (<ul>)
Listas ordenadas (<ol>)
Listas de definición (<dl>)

Cada una tiene sus propias características y limitaciones, pero gracias a la magia del CSS, podemos transformar su apariencia por completo.

Centrar listas HTML usando CSS

Centrar una lista en HTML no es tan intuitivo como parece.

Si intentas aplicar la propiedad text-align: center; directamente al contenedor, verás que solo se centra el texto de cada elemento, pero las viñetas o los números se quedan alineados a la izquierda, creando un efecto visual poco deseable.

Tal que así:

En un lugar de la Mancha,
de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo
de los de lanza en astillero,
adarga antigua,
rocín flaco y galgo corredor.

Una olla de algo más vaca que carnero,
salpicón las más noches,
duelos y quebrantos los sábados,
lantejas los viernes,
algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda.

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

Método Clásico con `inline-block`

Este método tradicional funciona aplicando un doble juego de alineaciones: centramos el contenedor y luego realineamos el contenido de la lista a la izquierda.

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

En un lugar de la Mancha,
de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo
de los de lanza en astillero,
adarga antigua,
rocín flaco y galgo corredor.

Una olla de algo más vaca que carnero,
salpicón las más noches,
duelos y quebrantos los sábados,
lantejas los viernes,
algún palomino de añadidura los domingos,
consumían las tres partes de su hacienda.

Método moderno con Flexbox (Recomendado)

Una forma más moderna y robusta de centrar una lista es usando Flexbox. Este método nos da mucho más control sobre la alineación y el espaciado. Simplemente aplicamos display: flex y justify-content: center al contenedor padre.

Elemento centrado con Flexbox.
Este método es más moderno y potente.

Código de ejemplo para el método Flexbox:

Código HTML

<div class="centrar-listas-flex">
  <ul>
    <li>Elemento centrado con Flexbox.</li>
    <li>Este método es más moderno y potente.</li>
  </ul>
</div>
Lenguaje del código: PHP (php)

Código CSS

/* El contenedor se convierte en un «contenedor flexible»
   y centra a sus hijos directos (la lista) horizontalmente. */
.centrar-listas-flex {
  display: flex;
  justify-content: center; /* Centra el hijo (la lista) horizontalmente */
}
Lenguaje del código: PHP (php)

Como ves, el código es más simple y el resultado es el mismo, pero con una base mucho más sólida para diseños complejos.

Cambiar la viñeta en las listas desordenadas

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.

Código CSS

ul.lista-azul > li
  list-style-type: none;
}

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

Para asegurar que este estilo solo se aplique a los elementos del primer nivel y no a posibles sub-listas, es una buena práctica usar el selector de hijo directo (>).

Elemento 1
Elemento 2
Elemento 3
Elemento 4

Personalizar listas con emoticonos

Los emojis que usamos en redes sociales, mensajes, etc. son códigos UNICODE, así que podemos usarlos para personalizar las viñetas de las listas HTML de nuestro sitio web.

Elemento con sonrisa

Elemento con pulgar arriba

Elemento con corazón

Para ello usaremos el atributo content del pseudoelemento ::before.

La forma más segura de hacerlo es creando clases específicas para cada tipo de emoticono que queramos usar.

Código CSS

/* Desactivamos la viñeta por defecto para nuestras listas personalizadas */
.lista-emoji li {
  list-style-type: none;
}

/* Y ahora definimos cada emoji con su clase */
.lista-emoji.sonrisa li::before {
  content: "😁 "; 
}
.lista-emoji.ok li::before {
  content: "👍 ";
}
.lista-emoji.corazon li::before {
  content: "❤ ";
  color: red;
}Lenguaje del código: CSS (css)

Usar una imagen como viñeta en una lista HMTL

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:

.lista-imagen li {
  list-style-type: none; /* Imprescindible para que no se vea el marcador original */
  padding-left: 2rem; /* Espacio para la imagen de fondo */
  background-image: url(https://URL-DE-TU-IMAGEN.svg);
  background-position: left center; /* o 0 50% */
  background-size: 1.3rem 1.3rem; /* Controlamos el tamaño de la imagen */
  background-repeat: no-repeat;
  margin-bottom: 0.5em; /* Espacio entre elementos */
}Lenguaje del código: PHP (php)

Cuyo resultado es:

Elemento 1
Elemento 2
Elemento 3
Elemento 4

Personalizar listas ordenadas con contadores CSS

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:

Elemento 1
Elemento 2
Elemento 3
Elemento 4

Elemento 6
Elemento 8
Elemento 10
Elemento 12

Código HTML

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

	<ol class="lista-numerada-2">
		<li>Elemento 6</li>
		<li>Elemento 8</li>
		<li>Elemento 10</li>
		<li>Elemento 12</li>
	</ol>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.

/* Base común para ambas listas */
.lista-numerada-1,
.lista-numerada-2 {
  list-style-type: none;
  padding-left: 0;
}

.lista-numerada-1 > li,
.lista-numerada-2 > li {
  position: relative;
  padding-left: 2em; /* Espacio para el número */
}

.lista-numerada-1 > li::before,
.lista-numerada-2 > li::before {
  font-weight: bold;
  position: absolute;
  left: 0;
  width: 1.8em;
  text-align: right;
}

/* --- Estilos específicos para la Lista 1 --- */
.lista-numerada-1 {
  counter-reset: contador1; /* Inicia el contador1 en 0 */
}
.lista-numerada-1 > li {
  counter-increment: contador1; /* Incrementa de 1 en 1 */
}
.lista-numerada-1 > li::before {
  content: counter(contador1) ". ";
  color: red;
}

/* --- Estilos específicos para la Lista 2 --- */
.lista-numerada-2 {
  counter-reset: contador2 4; /* Inicia el contador2 en 4 */
}
.lista-numerada-2 > li {
  counter-increment: contador2 2; /* Incrementa de 2 en 2 */
}
.lista-numerada-2 > li::before {
  content: counter(contador2) ") ";
  color: blue;
}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)

Elemento ordenado descendentemente
Elemento ordenado descendentemente
Elemento ordenado descendentemente
Elemento ordenado descendentemente

Y, por supuesto, podemos combinar varias personalizaciones.

Nivel Avanzado: Listas mixtas y anidadas

Una vez que dominamos la personalización de listas simples, el siguiente nivel es gestionar escenarios más complejos. ¿Qué pasa si queremos que una lista tenga marcadores diferentes para ciertos elementos? ¿O si necesitamos anidar un tipo de lista dentro de otro sin que se rompan los estilos?

Gracias a la especificidad de CSS, los pseudo-elementos y el selector de hijo directo (>), podemos solucionar estos casos de una forma muy limpia. Veamos tres escenarios prácticos.

Caso 1: Listas de un tipo con elementos de otro (listas con excepciones)

Imagina que tienes una lista de características «incluidas», pero quieres marcar una o dos como «no incluidas» (o viceversa) sin tener que crear dos listas separadas. La clave es aplicar una clase directamente al elemento <li> que queremos que sea la excepción.

Característica A (incluida).
Característica B (marcada como no incluida).
Característica C (incluida).

El HTML

La estructura es sencilla. Tenemos una lista <ul> con una clase principal (p. ej., .incluido) y luego añadimos una segunda clase (p. ej., .no-incluido) a los <li> que son la excepción.

<ul class="incluido">
  <li>Característica A (incluida).</li>
  <li class="no-incluido">Característica B (marcada como no incluida).</li>
  <li>Característica C (incluida).</li>
</ul>
Lenguaje del código: PHP (php)

El CSS

La clave está en la especificidad. Fíjate en el uso del selector de hijo directo (>). Lo añadimos para asegurar que estos estilos solo afecten a los elementos de primer nivel y no a posibles sub-listas que anidemos dentro, como veremos en el Caso 3.

/* --- LÓGICA COMPLETA Y CONSOLIDADA PARA LISTAS INCLUIDO / NO-INCLUIDO --- */

/* 1. Propiedades comunes de layout para los marcadores del primer nivel */
ul.incluido > li::before,
ul.no-incluido > li::before {
  font-weight: bold;
  display: inline-block;
  width: 1.2em;
  margin-left: -1.2em;
  text-align: center;
}

/* 2. Padding común para los <li> del primer nivel */
ul.incluido > li,
ul.no-incluido > li {
  list-style-type: none;
  padding-left: 1.2em;
  margin-bottom: 0.25em;
}

/* 3. Definición de los marcadores por DEFECTO */
ul.incluido > li::before {
  content: "\2713";
  color: green;
}
ul.no-incluido > li::before {
  content: "\2718";
  color: red;
}

/* 4. Definición de las EXCEPCIONES (los overrides) */
ul.incluido > li.no-incluido::before {
  content: "\2718";
  color: red;
}
ul.no-incluido > li.incluido::before {
  content: "\2713";
  color: green;
}
Lenguaje del código: PHP (php)

¿Cómo funciona? El truco está en la especificidad. El selector ul.incluido > li.no-incluido::before es más específico que ul.incluido > li::before, por lo que el navegador le da prioridad y aplica el estilo de la excepción solo donde corresponde.

Caso 2: Anidar una lista de viñetas dentro de una lista numerada

Otro escenario muy común es tener una lista de pasos numerados y necesitar detallar uno de ellos con una sub-lista de viñetas.

Primer paso numerado.
Segundo paso numerado, que incluye detalles:
- Detalle A con viñeta.
- Detalle B con viñeta.
Tercer paso numerado.

El problema es que, si no lo gestionamos bien, la sub-lista puede heredar la numeración y los contadores, o los estilos del tema pueden anular nuestra personalización.

La solución más robusta, especialmente en entornos como WordPress, es darle a nuestra lista ordenada principal un «nombre» único con una clase específica y luego usar el selector de hijo directo (>) para que los estilos de numeración solo afecten a sus elementos directos.

El HTML

Le añadimos una clase única a nuestra lista <ol> (en este ejemplo, mi-lista-numerada). Dentro de uno de sus <li>, anidamos la <ul> con su propia clase.

<ol class="mi-lista-numerada">
  <li>Primer paso numerado.</li>
  <li>
    Segundo paso numerado, que incluye detalles:
    <ul class="lst-asterisco">
      <li>Detalle A con viñeta.</li>
      <li>Detalle B con viñeta.</li>
    </ul>
  </li>
  <li>Tercer paso numerado.</li>
</ol>
Lenguaje del código: PHP (php)

El CSS

Con una clase en la <ol>, nuestros selectores son ahora muy directos y específicos, evitando conflictos con los estilos del tema.

/* Estilos para la lista numerada principal, identificada por su propia clase */
ol.mi-lista-numerada {
  list-style-type: none; /* Oculta el marcador nativo ::marker */
  counter-reset: contador1 0;
  padding-left: 0;
  margin-left: 0;
}

/* Aplicamos el contador SÓLO a los <li> hijos directos de la <ol> */
ol.mi-lista-numerada > li {
  counter-increment: contador1;
  position: relative;
  padding-left: 2em;
  margin-bottom: 0.5em;
}

/* El marcador de número personalizado ::before */
ol.mi-lista-numerada > li::before {
  content: counter(contador1) ". ";
  color: #8d0101;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8em;
  text-align: right;
  display: inline-block;
}

/* 1. Estilos para el contenedor <ul> de la sub-lista */
ol.mi-lista-numerada .lst-asterisco {
  list-style-type: none;
  padding-left: 1.5em; /* Indentación de la sub-lista */
  margin-top: 0.5em;
  margin-left: 0;
}

/* 2. Estilos para el <li> de la sub-lista. Le damos padding para hacer hueco. */
ol.mi-lista-numerada .lst-asterisco li {
  list-style-type: none;
  padding-left: 1.3em; /* Espacio para el marcador */
  margin-bottom: 0.25em;
  position: relative; /* Buena práctica para posicionar el ::before */
}

/* 3. Estilos para el marcador ::before. Lo posicionamos en el hueco que hemos creado. */
ol.mi-lista-numerada .lst-asterisco li::before {
  content: "\273D";
  color: #cc9933;
  font-weight: normal;

  /* Técnica de posicionamiento robusta (igual que en .incluido) */
  display: inline-block;
  text-align: center;
  width: 1.3em;
  margin-left: -1.3em; /* Lo "movemos" al espacio creado por el padding */
}
Lenguaje del código: PHP (php)

¿Cómo funciona? Al usar un selector tan específico como ol.mi-lista-numerada, nos aseguramos de que la regla para ocultar el marcador por defecto (list-style-type: none) se aplique sin problemas. A partir de ahí, el selector de hijo directo (>) sigue siendo crucial para garantizar que nuestro contador personalizado y los números solo afecten a los elementos del primer nivel, dejando a la sub-lista .lst-asterisco libre para tener su propio estilo.

Caso 3: Anidar una lista numerada dentro de una lista de viñetas

Este es el escenario inverso. Partimos de una lista de características con viñetas y, para detallar una de ellas, necesitamos una sub-lista con pasos numerados.

Característica A.
Característica B, que se compone de los siguientes pasos:
1. Primer sub-paso.
2. Segundo sub-paso.
Característica C.

El reto aquí es asegurarnos de que los <li> de la sub-lista numerada no hereden el marcador de viñeta (✓ o ✗) de su elemento padre. Esto lo logramos gracias a que en el "Caso 1" ya hemos actualizado las reglas para que usen el selector de hijo directo (>).

El HTML

Simplemente anidamos una etiqueta <ol> dentro del <li> de la lista principal.

<ul class="incluido">
  <li>Característica A.</li>
  <li>
    Característica B, que se compone de los siguientes pasos:
    <ol>
      <li>Primer sub-paso.</li>
      <li>Segundo sub-paso.</li>
    </ol>
  </li>
  <li>Característica C.</li>
</ul>
Lenguaje del código: PHP (php)

El CSS: creación de nuevos contadores

Una vez aislado el estilo de la lista padre, añadimos estas nuevas reglas para la lista ordenada anidada, creando un sistema de contadores completamente independiente para ella.

/* --- Estilos para la lista numerada ANIDADA --- */

/* Estilos para el contenedor <ol> anidado dentro de .incluido o .no-incluido */
ul.incluido ol,
ul.no-incluido ol {
  list-style-type: none;
  counter-reset: contador-sublista; /* Creamos y reiniciamos un nuevo contador */
  padding-left: 1.5em; /* Indentación de la sub-lista */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Estilos para los <li> de la sub-lista */
ul.incluido ol > li,
ul.no-incluido ol > li {
  counter-increment: contador-sublista; /* Incrementamos el nuevo contador */
  position: relative;
  padding-left: 2em; /* Espacio para el número */
  margin-bottom: 0.5em;
}

/* Estilo para el marcador numérico de la sub-lista */
ul.incluido ol > li::before,
ul.no-incluido ol > li::before {
  content: counter(contador-sublista) ". "; /* Mostramos el contador */
  color: #8d0101; /* Puedes elegir el color que quieras */
  font-weight: bold;
  position: absolute;
  left: 0;
  width: 1.8em;
  text-align: right;
}
Lenguaje del código: PHP (php)

¿Cómo funciona? Al haber aislado los estilos de la lista padre con > y al crear un nuevo contador (contador-sublista) para la lista anidada, ambos sistemas de marcadores pueden convivir en perfecta armonía sin interferir el uno con el otro.

Personalizar listas de definición (`<dl>`)

A diferencia de las otras listas, las de definición se usan para presentar pares de término-descripción. Su personalización se centra en la maquetación y la tipografía, no en los marcadores.

HTML base:

<dl class="lista-definicion-grid">
  <dt>HTML</dt>
  <dd>Lenguaje de Marcado de Hipertexto. Es el esqueleto de todas las páginas web.</dd>
  <dt>CSS</dt>
  <dd>Hojas de Estilo en Cascada. Es el lenguaje que usamos para diseñar y dar estilo a los documentos HTML.</dd>
</dl>
Lenguaje del código: PHP (php)

Nivel Avanzado: layout a dos columnas con CSS Grid

El verdadero potencial de estas listas se libera cuando las maquetamos en columnas. CSS Grid es la herramienta moderna y perfecta para este trabajo.

CSS:

.lista-definicion-grid {
  display: grid; /* ¡Activamos la magia de Grid! */
  grid-template-columns: max-content 1fr; /* Columna 1: tan ancha como su contenido. Columna 2: el resto del espacio. */
  gap: 1em 2em; /* Espacio vertical y horizontal entre celdas */
  align-items: center; /* Opcional: alinear verticalmente el término y su descripción */
}

.lista-definicion-grid dt {
  grid-column: 1; /* Posicionamos todos los <dt> en la primera columna */
  font-weight: bold;
}

.lista-definicion-grid dd {
  grid-column: 2; /* Posicionamos todos los <dd> en la segunda columna */
  margin: 0; /* Importantísimo: resetear el margen por defecto de <dd> */
}
Lenguaje del código: PHP (php)

Con este sencillo código, hemos creado un layout de dos columnas perfectamente alineado y semánticamente correcto.

HTML: Lenguaje de Marcado de Hipertexto. Es el esqueleto de todas las páginas web.
CSS: Hojas de Estilo en Cascada. Es el lenguaje que usamos para diseñar y dar estilo a los documentos HTML.

Una nota importante sobre la especificidad

A lo largo de este tutorial hemos simplificado los selectores para que sean más universales. En entornos como WordPress, los temas a menudo tienen sus propios estilos para las listas que son bastante específicos (usando clases como .entry-content o .wp-block-list).

Si en algún momento notas que tus estilos personalizados no se aplican, la causa más probable es que tu tema los esté sobrescribiendo.

La solución sería añadir una clase del contenedor principal (como .entry-content) al principio de tus selectores para aumentar su especificidad y darles más «fuerza». Por ejemplo, ul.incluido > li::before se convertiría en .entry-content ul.incluido > li::before.

En resumen

Realmente, podemos personalizar las listas HTML usando cualquier cosa que se pueda incluir en el content del pseudoelemento ::before, como imágenes o textos.

Y, dependiendo del nivel al que apliquemos la personalización de la viñeta, podemos conseguir listas muy chulas para, por ejemplo, barras de navegación, tablas de contenido, listados, etc.

Si haces una búsqueda en Internet encontrarás cientos de páginas con códigos y símbolos para usar en tus listas.

Así pues, hemos visto diversas técnicas y ejemplos para personalizar listas HTML utilizando CSS, incluyendo la personalización de viñetas, el uso de emoticonos, imágenes y contadores CSS, y la anidación o el centrado de listas.

Cómo personalizar listas HTML con CSS (guía completa)

Las listas en HTML se utilizan para mucho más que enumerar una serie de puntos. En realidad son un recurso muy interesante para poder maquetar elementos como barras de navegación, pestañas, etc.

Tabla de Contenidos

Centrar listas HTML usando CSS

Método Clásico con `inline-block`

Código HTML

Código CSS

Resultado

Método moderno con Flexbox (Recomendado)

Código HTML

Código CSS

Cambiar la viñeta en las listas desordenadas

Código CSS

Personalizar listas con emoticonos

Código CSS

Usar una imagen como viñeta en una lista HMTL

Personalizar listas ordenadas con contadores CSS

Código HTML

Código CSS

Listas numeradas en orden inverso

Nivel Avanzado: Listas mixtas y anidadas

Caso 1: Listas de un tipo con elementos de otro (listas con excepciones)

El HTML

El CSS

Caso 2: Anidar una lista de viñetas dentro de una lista numerada

El HTML

El CSS

Caso 3: Anidar una lista numerada dentro de una lista de viñetas

El HTML

El CSS: creación de nuevos contadores

Personalizar listas de definición (`<dl>`)

HTML base:

Nivel Avanzado: layout a dos columnas con CSS Grid

CSS:

Una nota importante sobre la especificidad

En resumen

Te recomiendo

Libros que me ayudan

Donde alojo mis sitios web

Cómo personalizar listas HTML con CSS (guía completa)

Las listas en HTML se utilizan para mucho más que enumerar una serie de puntos. En realidad son un recurso muy interesante para poder maquetar elementos como barras de navegación, pestañas, etc.

Tabla de Contenidos

Centrar listas HTML usando CSS

Método Clásico con inline-block

Código HTML

Código CSS

Resultado

Método moderno con Flexbox (Recomendado)

Código HTML

Código CSS

Cambiar la viñeta en las listas desordenadas

Código CSS

Personalizar listas con emoticonos

Código CSS

Usar una imagen como viñeta en una lista HMTL

Personalizar listas ordenadas con contadores CSS

Código HTML

Código CSS

Listas numeradas en orden inverso

Nivel Avanzado: Listas mixtas y anidadas

Caso 1: Listas de un tipo con elementos de otro (listas con excepciones)

El HTML

El CSS

Caso 2: Anidar una lista de viñetas dentro de una lista numerada

El HTML

El CSS

Caso 3: Anidar una lista numerada dentro de una lista de viñetas

El HTML

El CSS: creación de nuevos contadores

Personalizar listas de definición (<dl>)

HTML base:

Nivel Avanzado: layout a dos columnas con CSS Grid

CSS:

Una nota importante sobre la especificidad

En resumen

Te recomiendo

Libros que me ayudan

Donde alojo mis sitios web

Método Clásico con `inline-block`

Personalizar listas de definición (`<dl>`)