Contatori CSS con ::before
Crei sistemi di numerazione automatica utilizzando i contatori CSS e la funzione counter().
Contatori CSS con ::before è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Cosa sono i contatori CSS?
I contatori CSS sono variabili gestite da CSS, i cui valori possono essere incrementati e visualizzati nei contenuti generati. Consentono di numerare automaticamente gli elementi senza JavaScript o senza gestire manualmente i numeri nell'HTML.
counter-reset
counter-reset inizializza (o reimposta) un contatore. Lo applichi all'elemento che contiene gli elementi da contare.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>counter-increment
counter-increment incrementa il contatore di 1 (impostazione predefinita) ogni volta che viene applicato. Lo applichi agli elementi ripetuti.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Funzione counter() nella proprietà content
Visualizzi il valore corrente del contatore usando counter(name) nella proprietà content di un pseudo-elemento.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Contatore dei passaggi con stile
Un componente completo per passaggi numerati, senza 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>Valore iniziale del contatore
Imposti un numero iniziale personalizzato in counter-reset:
<ul class="list">
<li>Item one</li>
<li>Item two</li>
</ul>Stili dei contatori
Utilizzi un secondo argomento di counter() per specificare il tipo di stile dell'elenco:
<ul class="list" style="list-style:none;padding-left:0;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>Contatori annidati con counters()
counters(name, separator) (con la "s") crea numerazioni annidate come "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>Reimpostazione nelle liste annidate
Ogni ol annidato eredita l'ambito del contatore. La funzione counters() utilizza automaticamente l'intera catena di contatori.
Numerazione delle sezioni
Numeri automaticamente i titoli nei documenti lunghi:
<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>Indice con i contatori
In passato i contatori CSS venivano usati per gli indici e i documenti formattati. Oggi questo compito viene spesso gestito dai framework JavaScript, ma i contatori CSS restano un'opzione realizzabile con il solo CSS.
Verifica rapida
Quale proprietà incrementa un contatore CSS in corrispondenza di ogni elemento corrispondente?
Riepilogo
I contatori CSS consentono di numerare automaticamente gli elementi senza JavaScript. Utilizzi counter-reset sul contenitore, counter-increment sugli elementi ripetuti e visualizzi il valore con counter(name) nella proprietà content di un pseudo-elemento. counters() gestisce la numerazione annidata con i separatori.
Domande Frequenti
La lezione «Contatori CSS con ::before» è gratuita?
Sì — il testo completo di «Contatori CSS con ::before» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Contatori CSS con ::before»?
Crei sistemi di numerazione automatica utilizzando i contatori CSS e la funzione counter(). Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Contatori CSS con ::before»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Contenuto ::before e ::after
- ::placeholder ::selection e ::marker
- Contatori CSS con ::before
- Pattern decorativi con gli pseudo-elementi