Estilizar listas en CSS

Los marcadores ya son su propia cajita, accesible sin trucos de pseudoelementos.

.steps {
  list-style: decimal-leading-zero;
  padding-inline-start: 2.5rem;
}

.steps li::marker {
  color: #2b6cb0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li::before {
  content: "\2713\a0";
  color: #16a34a;
}

Cómo funciona

1. list-style fija tipo, imagen y posición del marcador de una vez.
2. ::marker estiliza la viñeta o el número en sí.
3. Una lista usada como layout debe decirlo con list-style: none y un rol.

Palabras clave y builtins usados aquí

• color
• content
• padding
• rem

El intento, en números

Líneas

20

Caracteres a escribir

277

Tokens

59

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 47 segundos.

Escribe este fragmento

Paso 1 de 3 en Estilo del contenido; paso 23 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →