Contadores CSS con ::before
Cree sistemas de numeración automática mediante contadores CSS y la función counter().
Contadores CSS con ::before es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué son los contadores CSS?
Los contadores CSS son variables cuyo mantenimiento realiza CSS y cuyos valores pueden incrementarse y mostrarse en contenido generado. Permiten numerar automáticamente sin JavaScript ni gestionar manualmente los números en HTML.
counter-reset
counter-reset inicializa (o restablece) un contador. Colóquelo en el elemento que contiene los elementos que se van a contar.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>counter-increment
counter-increment incrementa el contador en 1 (de forma predeterminada) cada vez que se aplica. Colóquelo en los elementos repetidos.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Función counter() en content
Muestre el valor actual del contador mediante counter(name) en la propiedad content de un pseudoelemento.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Contador de pasos con estilo
Un componente completo de pasos numerados sin JavaScript:
<div class="steps">
<div class="step">Create an account</div>
<div class="step">Verify your email</div>
<div class="step">Start your first project</div>
</div>Valor inicial del contador
Establezca un número inicial personalizado en counter-reset:
<ul class="list">
<li>Item one</li>
<li>Item two</li>
</ul>Estilos de contador
Utilice un segundo argumento en counter() para especificar un tipo de estilo de lista:
<ul class="list" style="list-style:none;padding-left:0;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>Contadores anidados con counters()
counters(name, separator) (con una «s») crea una numeración anidada como «1.1», «1.2», «2.1»:
<ol>
<li>Chapter one
<ol>
<li>Intro</li>
<li>Details</li>
</ol>
</li>
<li>Chapter two
<ol>
<li>Overview</li>
</ol>
</li>
</ol>Restablecimiento en listas anidadas
Cada ol anidado hereda el ámbito del contador. La función counters() utiliza automáticamente la cadena completa de contadores.
Numeración de secciones
Numere automáticamente los encabezados de documentos extensos:
<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>Índice con contadores
Tradicionalmente, los contadores CSS se utilizaban para crear índices y documentos con formato. Actualmente, esta tarea suele realizarse mediante frameworks de JavaScript, pero los contadores CSS siguen siendo una opción basada exclusivamente en CSS.
Comprobación rápida
¿Qué propiedad incrementa un contador CSS en cada elemento coincidente?
Resumen
Los contadores CSS permiten numerar automáticamente sin JavaScript. Utilice counter-reset en el contenedor, counter-increment en los elementos repetidos y muestre el valor con counter(name) en el content de un pseudoelemento. counters() gestiona la numeración anidada con separadores.
Preguntas frecuentes
¿La lección «Contadores CSS con ::before» es gratis?
Sí — el texto completo de «Contadores CSS con ::before» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Contadores CSS con ::before»?
Cree sistemas de numeración automática mediante contadores CSS y la función counter(). Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Contadores CSS con ::before»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Contenido de ::before y ::after
- ::placeholder, ::selection y ::marker
- Contadores CSS con ::before
- Patrones decorativos con pseudoelementos