En este tutorial vamos a ver, con todo detalle y ejemplos listos para usar en WordPress, cómo crear listas numeradas que muestren los números dentro de un círculo usando únicamente CSS (y aplicarlas correctamente desde tu tema o el personalizador). Se explican variantes —círculo relleno, borde hueco, tamaños, colores—, cómo tratar listas anidadas, consideraciones de accesibilidad y la forma correcta de integrarlo en WordPress.
Cómo funciona la técnica (resumen técnico)
La técnica se basa en dos pilares CSS: contadores CSS (counter-reset / counter-increment) y pseudo-elementos (::before) en cada li para generar y posicionar el número. El ol mantiene la semántica de lista ordenada (importante para accesibilidad y SEO) aunque ocultemos los marcadores por defecto. El resultado visual se logra con bordes, background y border-radius para hacer círculos.
Ejemplo básico (HTML CSS)
Ejemplo de HTML que puedes pegar directamente en el editor (bloque HTML o en el contenido):
ltol class=numbered-circle-listgt ltligtPrimer elementolt/ligt ltligtSegundo elementolt/ligt ltligtTercer elementolt/ligt lt/olgt
CSS mínimo para conseguir el número dentro de un círculo (puedes pegarlo en Apariencia → Personalizar → CSS adicional, o en tu hoja de estilos del tema):
/ Estilos base para la lista numerada con círculos /
.numbered-circle-list {
counter-reset: item / reinicia el contador /
list-style: none / quitamos el marcador por defecto /
padding-left: 0
margin-left: 0
}
.numbered-circle-list li {
counter-increment: item / incrementa por cada li /
position: relative
margin: 0 0 0.75rem 0
padding-left: 3rem / espacio para el círculo /
display: flex
align-items: center
min-height: 2.2rem
}
.numbered-circle-list li::before {
content: counter(item)
position: absolute
left: 0
top: 50%
transform: translateY(-50%)
width: 2rem
height: 2rem
line-height: 2rem
border-radius: 50%
background: #0073aa / color del círculo /
color: #ffffff / color del número /
text-align: center
font-weight: 700
font-size: 0.95rem
}
Notas sobre el ejemplo
Este estilo centra el número verticalmente, reserva 3rem de espacio a la izquierda para evitar que el texto toque el círculo y usa flex para alinear el contenido del li. Cambia colores y tamaños a tu gusto.
Variantes comunes
Círculo hueco (borde en lugar de relleno)
.numbered-circle-list--hollow li::before {
background: transparent
border: 2px solid #0073aa
color: #0073aa
box-sizing: border-box
}
Tamaño mayor (ej. índices grandes para secciones)
.numbered-circle-list--large li {
padding-left: 4.2rem
}
.numbered-circle-list--large li::before {
width: 3rem
height: 3rem
line-height: 3rem
font-size: 1.1rem
}
Uso de variables CSS para personalizar fácil
:root {
--nc-bg: #0073aa
--nc-color: #fff
--nc-size: 2rem
--nc-gap: 3rem
}
.numbered-circle-list {
padding-left: 0
}
.numbered-circle-list li {
padding-left: var(--nc-gap)
}
.numbered-circle-list li::before{
width: var(--nc-size)
height: var(--nc-size)
line-height: var(--nc-size)
background: var(--nc-bg)
color: var(--nc-color)
}
Listas anidadas (niveles con numeración compuesta)
Si necesitas numeración como 1, 1.1, 1.2 o 2.1.3 puedes usar contadores anidados. Ejemplo:
ltol class=numbered-circle-list nestedgt
ltligtCapítulo 1
ltolgt
ltligtSección 1lt/ligt
ltligtSección 2lt/ligt
lt/olgt
lt/ligt
ltligtCapítulo 2lt/ligt
lt/olgt
/ Contadores para varios niveles /
.numbered-circle-list.nested {
counter-reset: level1
}
.numbered-circle-list.nested > li {
counter-increment: level1
position: relative
padding-left: 3.2rem
}
.numbered-circle-list.nested > li::before {
content: counter(level1)
position: absolute
left: 0
top: 50%
transform: translateY(-50%)
width: 2rem height: 2rem
border-radius: 50%
background: #0073aa
color: #fff
text-align: center
line-height: 2rem
}
/ Nivel 2 /
.numbered-circle-list.nested > li ol {
margin-left: 0
padding-left: 3rem
counter-reset: level2
}
.numbered-circle-list.nested > li ol > li {
counter-increment: level2
position: relative
padding-left: 3.2rem
}
.numbered-circle-list.nested > li ol > li::before {
/ muestra la numeración compuesta 1.1, 1.2 ... /
content: counter(level1) . counter(level2)
position: absolute
left: 0
top: 50%
transform: translateY(-50%)
width: 2rem height: 2rem
border-radius: 50%
background: #555
color: #fff
text-align: center
line-height: 2rem
}
Integración en WordPress
Opciones para añadir el CSS al sitio WordPress:
- Copiar el CSS en Apariencia → Personalizar → CSS adicional (rápido y efectivo).
- Crear un archivo CSS en tu tema hijo (ej. css/numbered-circles.css) y encolarlo desde functions.php.
- Si usas un page builder o Gutenberg, añade la clase CSS (por ejemplo numbered-circle-list) al bloque Lista.
Encolar la hoja de estilos desde functions.php
function theme_enqueue_numbered_circles() {
wp_enqueue_style(
numbered-circles,
get_stylesheet_directory_uri() . /css/numbered-circles.css,
array(),
1.0
)
}
add_action(wp_enqueue_scripts, theme_enqueue_numbered_circles)
Consideraciones de accesibilidad y compatibilidad
– Mantén la semántica: usa ltolgt y ltligt. Los lectores de pantalla entienden la estructura y anuncian la posición del elemento en la lista aunque ocultes los marcadores visuales. No intentes eliminar la semántica con spans decorativos en todos los navegadores.
– Generar el número con CSS (::before) es puramente decorativo. La mayoría de lectores de pantalla detectan la organización del ltolgt por sí sola, pero si dependes de compatibilidad máxima, no ocultes totalmente la información estructural con técnicas que la eliminen del DOM.
– Para impresión: muchos diseños impresos prefieren la numeración por defecto. Puedes ocultar los pseudo-elementos en impresión con:
@media print {
.numbered-circle-list li::before { display: none }
.numbered-circle-list { list-style: decimal } / usar numeración estándar en papel /
}
Soporte de navegadores y fallbacks
Los contadores y pseudo-elementos están soportados por los navegadores modernos (Chrome, Firefox, Edge, Safari). Para navegadores muy antiguos el fallback es que no se muestre el círculo: asegúrate de que el texto del li tenga suficiente espacio (padding-left) para que no quede montado sobre lo que debería ser el marcador por defecto.
Consejos prácticos y buenas prácticas
- Aplica la clase al bloque de lista específico en Gutenberg para evitar afectar todas las listas del tema.
- Usa variables CSS para facilitar cambios de color y tamaños desde un solo lugar.
- Si quieres íconos en lugar de números, puedes reemplazar content: counter(item) por content: • o por una fuente de iconos, pero perderás la numeración automática.
- Comprueba el contraste del color del número sobre el fondo del círculo (WCAG) y ajusta si es necesario.
Ejemplo completo: lista estilizada con variaciones y print-fallback
/ Ejemplo completo compacto /
.numbered-circle-list {
--bg: #ff6f61
--color: #ffffff
counter-reset: item
list-style: none
padding-left: 0
}
.numbered-circle-list li {
counter-increment: item
position: relative
margin: 0 0 0.65rem 0
padding-left: 3.4rem
display: flex
align-items: center
}
.numbered-circle-list li::before {
content: counter(item)
position: absolute
left: 0
top: 50%
transform: translateY(-50%)
width: 2.4rem
height: 2.4rem
border-radius: 50%
background: var(--bg)
color: var(--color)
text-align: center
line-height: 2.4rem
font-weight: 700
box-shadow: 0 2px 6px rgba(0,0,0,0.08)
}
@media print {
.numbered-circle-list li::before { display: none }
.numbered-circle-list { list-style: decimal padding-left: 1.2rem }
}
Con todo lo anterior tienes técnicas completas para crear listas numeradas con números en círculo, adaptables a cualquier diseño de WordPress. Puedes añadir, modificar variables o clases para generar variantes visuales según las necesidades del sitio.
Observaciones finales
Utiliza la clase en los bloques de lista que quieras estilizar y centraliza los ajustes (colores, tamaños) mediante variables CSS o en el archivo de estilos del tema hijo. Así mantendrás el control y la coherencia visual en todo el sitio.
Leave a Reply