CSS counter-reset
La proprietà CSS3 counter-reset inizializza un contatore personalizzato
La proprietà counter-reset
definisce e azzera un contatore che può poi essere incrementato con counter-increment
. È spesso usata in combinazione con ::before
e content
per generare contenuti numerici dinamici in elenchi, passaggi sequenziali o titolazioni automatiche.
Sintassi
Significato dei valori principali:
-
nome-contatore: il nome logico del contatore da creare. Deve essere lo stesso utilizzato con
counter-increment
. -
valore-iniziale: (facoltativo) valore da cui parte il contatore. Il valore predefinito è
0
. Può essere anche negativo. -
none: nessun contatore viene inizializzato.
Esempio proprietà: counter-reset
Codice Esempio: counter-reset

.step-list {
counter-reset: passo 1;
padding-left: 0;
}
.step-list li {
list-style: none;
counter-increment: passo;
position: relative;
padding-left: 40px;
margin-bottom: 10px;
font-size: 18px;
}
.step-list li::before {
content: "Passo " counter(passo) ": ";
position: absolute;
left: 0;
color: #4078f2;
font-weight: bold;
}
Contenuto Esempio: counter-reset
Esempio di utilizzo della proprietà counter-reset
In questo esempio, counter-reset
inizializza un contatore chiamato passo
che viene poi incrementato in ogni elemento li
:
- Accendi il computer
- Apri il browser
- Visita il sito desiderato
CSS e HTML per l'esempio:
<style>
.step-list {
counter-reset: passo 1;
padding-left: 0;
}
.step-list li {
list-style: none;
counter-increment: passo;
position: relative;
padding-left: 90px;
margin-bottom: 10px;
font-size: 18px;
}
.step-list li::before {
content: "Passo " counter(passo) ": ";
position: absolute;
left: 0;
color: #4078f2;
font-weight: bold;
}
</style>
<ul class="step-list">
<li>Accendi il computer</li>
<li>Apri il browser</li>
<li>Visita il sito desiderato</li>
</ul>
Nota:
gli pseudoelementi si scrivono con due due punti (::
) per distinguere meglio da pseudoclassi (:
), anche se alcuni browser supportano ancora la notazione con uno solo (:before
, :after..
.).
Pseudoelemento | Descrizione |
---|---|
::before |
Inserisce contenuto prima del contenuto effettivo di un elemento. |
::after |
Inserisce contenuto dopo il contenuto effettivo di un elemento. |
::first-letter |
Seleziona la prima lettera di un blocco di testo. |
::first-line |
Seleziona la prima riga visibile di un blocco di testo. |
::selection |
Applica uno stile al testo selezionato dall’utente. |
::placeholder |
Seleziona il testo segnaposto in un campo input o textarea. |
::marker |
Seleziona il simbolo di un elemento lista (es. il pallino o numero). |
::cue |
Stilizza le didascalie ('<track>') nei contenuti video. |
::backdrop |
Stilizza il fondo modale dietro elementi a tutto schermo come i <dialog> . |
::file-selector-button |
Stilizza il pulsante di selezione file in un input type="file" . |
::part() |
Seleziona una parte interna di un Web Component esposta con l’attributo part . |
::slotted() |
Stilizza gli elementi inseriti in uno slot all’interno di un Web Component. |
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.