CSS: contatori negativi

I contatori CSS del contenuto generato possono avere valori negativi. Tali valori, impostati tramite la proprietà counter-reset, influenzeranno la progressione numerica dei contatori specificata con la proprietà counter-increment. Possiamo sfruttare questa caratteristica a nostro vantaggio. Vediamo come.

Abbiamo la seguente lista ordinata:


<ol id="test">
	<li>Voce</li>
	<li>Voce</li>
	<li>Voce</li>
	<li>Voce</li>
	<li>Voce</li>
	<li>Voce</li>
</ol>

Vogliamo creare la progressione numerica 1, 3, 5, 7, 9, 11. Ecco il codice CSS:


#test {counter-reset: third -1;}
#test li {display: block;}
#test li:before {counter-increment: third 2; content: counter(third)". "; color: green;}

Il contatore viene resettato a -1 (valore negativo) e quindi incrementato ogni volta di 2. Quindi avremo:

-1 + 2 = 1
1 + 2 = 3
3 + 2 = 5
5 + 2 = 7
7 + 2 = 9
9 + 2 = 11

Potete visionare l'esempio finale in questa pagina.

Torna su