CSS counter-set
La proprietà CSS counter-set in CSS3 imposta il valore iniziale di un contatore
La proprietà counter-set, introdotta in CSS3, consente di creare e assegnare un valore iniziale a un contatore CSS personalizzato. Questo è utile in combinazione con counter-increment e content per realizzare numerazioni automatiche dinamiche e controllate a livello di singolo elemento o gruppo.
Sintassi
Significato dei valori principali:
nome-contatore: il nome arbitrario del contatore (es.
sezione,capitolo).numero: il valore iniziale da assegnare al contatore (default:
0se omesso).
Nota: counter-set non visualizza il valore: serve solo a definirlo o reimpostarlo. Per mostrarlo, si usa content: counter(nome).
Esempio proprietà: counter-set
Codice Esempio: counter-set
.counter-wrapper {
counter-set: step 5;
}.counter-item {
counter-increment: step;
}.counter-item::before {
content: "Step " counter(step) ": ";
font-weight: bold;
color: #50a14f;
}
Contenuto Esempio: counter-set
Esempio di utilizzo di counter-set
In questo esempio, inizializziamo un contatore chiamato step a 5, quindi lo incrementiamo in una lista:
CSS e HTML per l’uso di counter-set:
<style>
.counter-wrapper {
counter-set: step 5;
}
.counter-item {
counter-increment: step;
}
.counter-item::before {
content: "Step " counter(step) ": ";
font-weight: bold;
color: #50a14f;
}
</style>
<div class="counter-wrapper">
<div class="counter-item">Registrazione</div>
<div class="counter-item">Verifica Email</div>
<div class="counter-item">Completamento Profilo</div>
</div>
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.
Supporto Browser
IP: 216.73.216.214
