Tutorial WordPress: Personalizar el bloque lista con contadores CSS (list-style: decimal-leading-zero)

Introducción

Este tutorial explica, paso a paso y con ejemplos listos para usar, cómo personalizar el bloque Lista de WordPress (Gutenberg) para mostrar números con ceros a la izquierda —por ejemplo 01, 02, 03— usando list-style: decimal-leading-zero y técnicas con contadores CSS para casos avanzados. Incluye métodos simples, soluciones para editores, fallbacks y ejemplos visuales (badges, espaciado, colores).

Requisitos y contexto

Funciona en el frontend añadiendo CSS al tema (Appearance → Customize → Additional CSS, un child theme o un plugin de CSS personalizado). Para vista previa dentro del editor de bloques (Gutenberg) conviene añadir el CSS también al editor de bloques con un pequeño snippet en functions.php o usando add_editor_style / enqueue_block_editor_assets.

Sobre selectores del bloque Lista

El bloque Lista de Gutenberg típicamente genera un ltulgt o ltolgt con la clase wp-block-list (y el bloque envolvente puede ser ltdiv class=wp-block-listgt dependiendo del tema). Lo más práctico es asignar una clase personalizada al bloque desde la barra lateral del bloque (Additional CSS class(es)). En los ejemplos usaremos leading-zero-list.

Método 1 — La forma más sencilla: list-style

Si solo quieres el número con cero inicial y no necesitas adornos extra, la propiedad CSS list-style: decimal-leading-zero es la opción más directa y soportada en navegadores modernos.

Pasos

Selecciona el bloque Lista en el editor y, en la barra lateral, añade la clase: leading-zero-list.
Agrega el siguiente CSS en Appearance → Customize → Additional CSS o en tu hoja de estilos del tema.

.leading-zero-list ol {
  list-style: decimal-leading-zero
  / Ajusta la posición del marcador si hace falta /
  list-style-position: outside
  margin-left: 1.5rem / modifica según el diseño del tema /
}

Ejemplo HTML generado por el bloque (esto no es necesario incluir en WP, lo muestro para referencia):

lt!-- Bloque Lista en WordPress con clase adicional --gt
lt!-- Dentro de Gutenberg: asignar leading-zero-list en Additional CSS class(es) --gt
ltol class=wp-block-list leading-zero-listgt
  ltligtPrimer elementolt/ligt
  ltligtSegundo elementolt/ligt
  ltligtTercer elementolt/ligt
lt/olgt

Ventajas y limitaciones

Muy simple y semántico.
Funciona automáticamente con el atributo start del ltolgt (el navegador aplica el formato al número mostrado).
Limitado si quieres badges personalizados o estilos que no admite list-style (por ejemplo, círculos coloreados con número dentro).

Método 2 — Control total con contadores CSS (listas sin marcador pseudo-elemento)

Si quieres un diseño más elaborado (badges, colores, alineación, añadir prefijos/sufijos) usa counter-reset, counter-increment y pseudo-elementos. Este enfoque también permite añadir ceros a la izquierda con control sobre qué números reciben el cero.

Ejemplo: números con badge circular y cero líder solo para 1..9

.leading-zero-list {
  / opcional: restricciones de ancho del bloque /
}

.leading-zero-list ol {
  list-style: none / retiramos marcadores nativos /
  counter-reset: item / iniciamos el contador /
  margin-left: 0
  padding-left: 3.2rem / espacio para el badge /
}

/ Cada li incrementa el contador /
.leading-zero-list ol gt li {
  counter-increment: item
  position: relative
  padding: 0.4rem 0 / espacio vertical entre elementos /
}

/ Badge común para todos (números >= 10) /
.leading-zero-list ol gt li::before {
  content: counter(item) .
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 2.4rem
  text-align: right
  color: #fff
  background: #2b7cff
  border-radius: 999px
  padding: 0.25rem 0.5rem
  font-weight: 700
}

/ Fallback visual: para primeros 9 elementos mostrar 0 delante con un estilo distinto /
.leading-zero-list ol gt li:nth-child(-n 9)::before {
  content: 0 counter(item) .
  background: #ff6b6b
}

Notas sobre el ejemplo:

Usamos :nth-child(-n 9) para detectar los primeros 9 elementos y prefijar un 0. Esto evita depender de soporte de decimal-leading-zero en pseudo-contadores.
Si la lista puede tener más de 9 elementos y quieres cero solo hasta el 9, esta técnica es correcta.

Soportar listas con atributo start

Si usas ltol start=5gt y la lista empieza en un valor distinto de 1, la técnica con contadores debe sincronizarse reajustando counter-reset. CSS puro no puede leer dinámicamente el valor numérico de start, por lo que hay tres opciones:

Agregar inline style al ltolgt desde el editor HTML: ltol style=counter-reset: item 4gt (porque start=5 → reset a 4).
Editar la clase CSS con variantes preparadas (por ejemplo, .leading-zero-list.start-5) y asignar esa clase manualmente al bloque.
Usar list-style: decimal-leading-zero si el navegador aplica correctamente el start.

Aplicar el CSS en el editor de bloques (vista previa en Gutenberg)

Para que los cambios se vean también dentro del editor de bloques, añade un archivo CSS que se cargue en el editor o encolado vía functions.php. Ejemplo mínimo en functions.php de un child theme:

// En functions.php (child theme)
function mi_tema_enqueue_block_editor_styles() {
    wp_enqueue_style(
        mi-editor-list-styles,
        get_stylesheet_directory_uri() . /editor-list-styles.css,
        array(),
        1.0
    )
}
add_action(enqueue_block_editor_assets, mi_tema_enqueue_block_editor_styles)

Crea editor-list-styles.css con los estilos que necesites (por ejemplo los del método de badges o el simple decimal-leading-zero).

Compatibilidad y fallbacks

list-style: decimal-leading-zero está soportado en la mayoría de navegadores modernos, pero si necesitas máxima compatibilidad (o estilos avanzados), usa contadores CSS más pseudo-elementos. Si eliges contadores, recuerda:

Los pseudo-elementos reemplazan el marcador, por lo que debes manejar padding/margins para que el contenido no se solape.
El atributo start del ltolgt requiere intervención manual (inline style o clases adicionales) para ajustar counter-reset si no quieres discrepancias.
Para accesibilidad, evita ocultar completamente los números a tecnologías asistivas si usas list-style: none, los números añadidos con ::before siguen siendo visibles, pero prueba con lectores de pantalla si cambias mucho la semántica.

Ejemplos completos listos para pegar

1) Método simple — class decimal-leading-zero

/ Pegar en Appearance → Customize → Additional CSS /
.leading-zero-list ol {
  list-style: decimal-leading-zero
  list-style-position: outside
  margin-left: 1.6rem
  color: #222
}

2) Badge circular con cero líder solo para 1..9 (estilo visual)

.leading-zero-list ol {
  list-style: none
  counter-reset: item
  padding-left: 3.2rem
  margin: 0
}

.leading-zero-list ol gt li {
  counter-increment: item
  position: relative
  padding: 0.45rem 0
}

/ Badges por defecto /
.leading-zero-list ol gt li::before {
  content: counter(item) .
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 2.4rem
  height: 2.4rem
  display: inline-flex
  align-items: center
  justify-content: center
  color: #ffffff
  background: #1e88e5
  border-radius: 50%
  font-weight: 600
  font-size: 0.95rem
}

/ Para 1..9, añadimos un 0 delante y un color distinto /
.leading-zero-list ol gt li:nth-child(-n 9)::before {
  content: 0 counter(item) .
  background: #ff7043
}

3) Soporte para start usando inline style

Si en HTML pones ltol start=5gt, añade también inline counter-reset para mantener coherencia con contadores CSS:

ltol class=wp-block-list leading-zero-list start=5 style=counter-reset: item 4gt
  ltligtElemento 5 (mostrará 05 si aplica regla de cero)lt/ligt
  ltligtElemento 6lt/ligt
lt/olgt

Consejos prácticos

Para aplicar solo a un bloque, usa la clase adicional del bloque. Para aplicar globalmente a todas las listas enumeradas del sitio, puedes apuntar a ol.wp-block-list o incluso a ol (con cautela).
Comprueba el resultado en móviles: es posible que necesites ajustar padding-left y el tamaño del badge.
Si tu tema ya aplica estilos a listas, añade selectores más específicos (por ejemplo .entry-content .leading-zero-list ol) para sobreescribirlos.
Prueba con lectores de pantalla si cambias marcadores nativos por pseudo-elementos para confirmar que la lectura sigue siendo correcta.

Resumen rápido

Si buscas la solución más simple y compatible: añade una clase al bloque y usa list-style: decimal-leading-zero. Si necesitas un control visual completo (badges, colores, alineación), usa contadores CSS con ::before y, si hace falta, nth-child() para añadir el cero solo a los primeros nueve elementos. Para ver los cambios dentro de Gutenberg, añade los estilos al editor con enqueue_block_editor_assets.

SushiHost