Introducción

Este tutorial explica, paso a paso y con ejemplos listos para copiar, cómo estilizar listas ordenadas en WordPress de modo que los números sean grandes, visualmente destacados y alineados a la izquierda. Se incluyen varias técnicas (pseudo-elementos, ::marker, CSS Grid), consideraciones de accesibilidad y cómo integrar el código en WordPress (CSS adicional, functions.php, editor de bloques).

Consideraciones previas

Antes de aplicar estilos globales, ten en cuenta:

• Accesibilidad: Los lectores de pantalla deben seguir percibiendo el orden no elimines el significado semántico del elemento ltolgt ni ocultes el contador a AT.
• Compatibilidad: ::marker funciona en navegadores modernos para retrocompatibilidad utiliza pseudo-elementos ::before con counter-reset/counter-increment.
• Responsive: Los números grandes deben escalar bien en móviles usa unidades relativas (rem, clamp) o media queries.
• Edición en WordPress: Aplica clases CSS a las listas desde el editor de bloques o usa CSS global en Apariencia → Personalizar → CSS adicional.

Método 1 — CSS puro con counter y ::before (máxima compatibilidad)

Este método elimina el marcador nativo, mantiene la semántica y crea un número grande mediante ::before. Es la opción más compatible y controlable.

CSS (copiar en tu stylesheet o CSS adicional):

/ Clase base para listas con números grandes alineados a la izquierda /
.large-num-list {
  list-style: none            / quitamos marcador nativo /
  margin: 0
  padding: 0
  counter-reset: section      / reiniciamos contador /
}

/ Elemento de la lista /
.large-num-list > li {
  counter-increment: section  / incrementamos por cada elemento /
  position: relative
  margin: 1rem 0
  padding-left: 6.5rem        / espacio para el número grande /
  min-height: 3.5rem          / opcional: para alinear verticalmente /
  display: block
}

/ Número grande como pseudo-elemento /
.large-num-list > li::before {
  content: counter(section)
  position: absolute
  left: 0                     / alineado a la izquierda del contenedor /
  top: 50%
  transform: translateY(-50%)
  font-size: 3.5rem           / tamaño del número /
  font-weight: 700
  line-height: 1
  color: #222
  width: 5.5rem
  text-align: left            / mantiene el número en la izquierda /
  letter-spacing: -0.02em
  font-family: inherit
  / opcional: estilo de badge /
  / background: rgba(0,0,0,0.05)
     padding: 0.25rem 0.5rem
     border-radius: 0.35rem /
}

/ Ajustes para pantallas pequeñas /
@media (max-width: 600px) {
  .large-num-list > li {
    padding-left: 4.5rem
  }
  .large-num-list > li::before {
    font-size: 2.2rem
    width: 3.5rem
  }
}

Ejemplo de HTML que añadirías en el editor (usa la clase en la lista):

ltol class=large-num-listgt
  ltligtPrimer paso: descripción completa del paso uno.lt/ligt
  ltligtSegundo paso: explicación detallada del segundo paso.lt/ligt
  ltligtTercer paso: detalles del tercer paso y enlaces.lt/ligt
lt/olgt

Método 2 — Usando ::marker (navegadores modernos)

Si te interesa simplicidad y tu público usa navegadores modernos, ::marker permite estilizar el marcador nativo. Limitación: no puedes aplicar propiedades complejas (como transform) al marcador en todos los navegadores.

/ Estilos con ::marker /
.modern-large-num-list {
  padding-left: 0 / limpia si quieres controlar posicionamiento desde el marker /
  margin: 0
  list-style: decimal
}

.modern-large-num-list > li {
  padding-left: 4.5rem / espacio para el marker visual /
  position: relative
}

.modern-large-num-list > li::marker {
  font-size: 3rem
  font-weight: 700
  color: #d9534f
  / En algunos navegadores se aplican pocas propiedades por eso ::before es fallback recomendable /
}

Método 3 — Números en columna separada con CSS Grid (alineación precisa)

Si quieres que el número quede en una columna completamente separada (útil cuando el texto de los items tiene múltiples líneas), CSS Grid permite una disposición robusta.

.grid-num-list {
  list-style: none
  counter-reset: item
  margin: 0
  padding: 0
}

.grid-num-list gt li {
  display: grid
  grid-template-columns: 5rem 1fr / columna fija para número   área de contenido /
  gap: 1rem
  align-items: start
  counter-increment: item
  margin: 0.75rem 0
}

/ Colocar número usando ::before o un elemento ::marker simulado /
.grid-num-list gt li::before {
  content: counter(item)
  font-size: 3rem
  font-weight: 700
  grid-column: 1 / 2
  justify-self: start
  align-self: center
  color: #1a73e8
}

/ Contenido del item ocupa la segunda columna /
.grid-num-list gt li gt  {
  grid-column: 2 / -1
}

HTML recomendado (cada li puede contener etiquetas internas como lth4gt o ltpgt):

ltol class=grid-num-listgt
  ltligt
    lth4gtTítulo 1lt/h4gt
    ltpgtTexto explicativo que puede ocupar varias líneas y seguirá alineado correctamente.lt/pgt
  lt/ligt
  ltligt
    lth4gtTítulo 2lt/h4gt
    ltpgtOtro texto extenso para comprobar alineación multi-línea.lt/pgt
  lt/ligt
lt/olgt

Integración en WordPress

A. Añadir CSS desde Personalizar

Ve a Apariencia → Personalizar → CSS adicional y pega el CSS de cualquiera de los métodos. Luego añade la clase a tu ltolgt desde el editor de bloques (panel Avanzado → Clase CSS adicional) o usando un bloque HTML.

B. Encolar un archivo CSS desde functions.php

Si prefieres un archivo CSS dentro de tu tema hijo, añade el siguiente fragmento a functions.php (tema hijo recomendado):

lt?php
function theme_enqueue_large_list_styles() {
  wp_enqueue_style(
    theme-large-list,
    get_stylesheet_directory_uri() . /css/large-list.css,
    array(),
    1.0
  )
}
add_action( wp_enqueue_scripts, theme_enqueue_large_list_styles )
?gt

Luego crea css/large-list.css en tu tema hijo y pega dentro el CSS deseado (método 1, 2 o 3).

C. Uso en el editor de bloques (Gutenberg)

• Selecciona la lista ordenada en el editor.
• En el panel Derecho → Avanzado → Clase CSS adicional escribe: large-num-list (o la clase que uses).
• Publica/actualiza y verifica en frontend.

Accesibilidad y SEO

• Mantén la etiqueta semántica ltolgt para que los lectores de pantalla y motores de búsqueda comprendan el orden.
• No uses aria-hidden=true en el número generado el contador visual creado con CSS no afecta a la semántica del ltligt (los lectores suelen leer la posición). Si necesitas garantizar lectura por AT, deja el texto del número visible en DOM y oculta únicamente visualmente con técnicas accesibles.
• Evita poner contenido importante exclusivamente en el pseudo-elemento el contenido real del ltligt debe contener la información.

Soporte RTL y múltiples idiomas

Para idiomas de derecha a izquierda, ajusta las propiedades left/right y la dirección del padding. Ejemplo sencillo:

/ Soporte RTL básico /
.rtl .large-num-list gt li {
  padding-left: 0
  padding-right: 6.5rem
}
.rtl .large-num-list gt li::before {
  left: auto
  right: 0
  text-align: right
}

Ejemplos avanzados: badge circular y número con color degradado

Ejemplo de badge circular para números:

.circle-badge-list {
  list-style: none
  counter-reset: step
  margin: 0
  padding: 0
}

.circle-badge-list gt li {
  counter-increment: step
  padding-left: 5.5rem
  position: relative
  margin: 1rem 0
}

.circle-badge-list gt li::before {
  content: counter(step)
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  width: 3.25rem
  height: 3.25rem
  background: linear-gradient(135deg, #ff7a18, #af002d)
  color: #fff
  border-radius: 50%
  display: inline-grid
  place-items: center
  font-weight: 700
  font-size: 1.35rem
}

Compatibilidad, pruebas y ajustes finales

Prueba en:

• Chrome, Firefox, Edge, Safari (desktop y mobile).
• Lectores de pantalla populares (NVDA, VoiceOver) si tu sitio exige accesibilidad completa.
• Impresión: añade reglas @media print si no quieres números tan grandes en papel.

Ejemplo de ajuste responsive con clamp para el tamaño del número:

.large-num-list gt li::before {
  font-size: clamp(1.8rem, 4vw, 3.5rem) / escala entre móvil y escritorio /
}

Tabla de comparación rápida

Enfoque	Compatibilidad	Control visual	Accesibilidad
counter ::before	Alta	Completo	Alto (mantiene semántica)
::marker	Moderada-alta (moderno)	Limitado	Alto
Grid con columna separada	Alta	Muy alto (alineación multi-línea)	Alto

Ejemplo completo listo para WordPress

CSS (pega en CSS adicional o en tu archivo):

/ Ejemplo completo: large-num-list con responsive y badge sutil /
.large-num-list {
  list-style: none
  counter-reset: step
  margin: 0
  padding: 0
}

.large-num-list gt li {
  counter-increment: step
  padding-left: 6rem
  margin: 1rem 0
  position: relative
  min-height: 3rem
}

.large-num-list gt li::before {
  content: counter(step)
  position: absolute
  left: 0
  top: 50%
  transform: translateY(-50%)
  font-size: clamp(1.8rem, 4vw, 3rem)
  font-weight: 800
  color: #0b3d91
  width: 4.5rem
  text-align: left
}

/ pequeño ajuste en móvil /
@media (max-width: 480px) {
  .large-num-list gt li {
    padding-left: 4.2rem
  }
  .large-num-list gt li::before {
    width: 3rem
  }
}

HTML que puedes poner en un bloque HTML o en el editor (añade la clase a la lista):

ltol class=large-num-listgt
  ltligtInstala y activa el plugin recomendado.lt/ligt
  ltligtConfigura opciones básicas en el panel de ajustes.lt/ligt
  ltligtAplica estilos personalizados desde Apariencia → Personalizar → CSS adicional.lt/ligt
lt/olgt

Notas finales

Las técnicas mostradas ofrecen flexibilidad para conseguir números grandes y alineados a la izquierda manteniendo buena compatibilidad y accesibilidad. Elige el método según soporte de navegadores y necesidades de diseño: ::before para control total, ::marker para simplicidad cuando el público usa navegadores modernos, y grid cuando el contenido del ltligt es complejo y necesita una columna dedicada para el número.