Contadores CSS com ::before
Crie sistemas de numeração automática usando contadores CSS e a função counter().
Contadores CSS com ::before é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O que são contadores CSS?
Os contadores CSS são variáveis mantidas pelo CSS, cujos valores podem ser incrementados e exibidos em conteúdo gerado. Eles permitem a numeração automática sem JavaScript ou o gerenciamento manual de números no HTML.
counter-reset
counter-reset inicializa ou redefine um contador. Coloque-o no elemento que contém os itens a serem contados.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>counter-increment
counter-increment aumenta o contador em 1 (por padrão) cada vez que é aplicado. Coloque-o nos itens repetidos.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Função counter() em content
Exiba o valor atual do contador usando counter(name) na propriedade content de um pseudo-elemento.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Contador de etapas estilizado
Um componente completo de etapas numeradas sem 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 do contador
Defina um número inicial personalizado em counter-reset:
<ul class="list">
<li>Item one</li>
<li>Item two</li>
</ul>Estilos de contador
Use um segundo argumento em counter() para especificar um 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 aninhados com counters()
counters(name, separator) (com um “s”) cria uma numeração aninhada, 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>Redefinição em listas aninhadas
Cada ol aninhado herda o escopo do contador. A função counters() usa automaticamente toda a cadeia de contadores.
Numeração de seções
Numere automaticamente os títulos em documentos longos:
<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>Sumário com contadores
Historicamente, os contadores CSS eram usados em sumários e documentos formatados. Hoje, isso costuma ser feito por estruturas JavaScript, mas os contadores CSS continuam sendo uma opção baseada exclusivamente em CSS.
Verificação rápida
Qual propriedade incrementa um contador CSS em cada elemento correspondente?
Recapitulação
Os contadores CSS permitem a numeração automática sem JavaScript. Use counter-reset no contêiner, counter-increment nos itens repetidos e exiba o valor com counter(name) no content de um pseudo-elemento. counters() trata da numeração aninhada com separadores.
Perguntas Frequentes
A aula “Contadores CSS com ::before” é grátis?
Sim — o texto completo de “Contadores CSS com ::before” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Contadores CSS com ::before”?
Crie sistemas de numeração automática usando contadores CSS e a função counter(). Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Contadores CSS com ::before”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Conteúdo de ::before e ::after
- ::placeholder ::selection e ::marker
- Contadores CSS com ::before
- Padrões Decorativos com Pseudo-elementos