Creare un counter con i CSS
Solitamente, per creare un counter all'interno delle nostre pagine web, usiamo due approcci:
- usare una lista HTML
- usare una variabile come counter (o variabile Javascript, PHP, ecc...non importa)
Con i CSS3 abbiamo una nuova modalità, senza usare ne liste ne variabili counter.
Per ottenere il nostro counter ci basta un pò di HTML e CSS, usando il selettore before.
Vediamo un rapido esempio:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Counter</title>
<style>
.container {
counter-reset: issues 0;
}
.issue:before {
counter-increment: issues 1;
content: "Issue " counter(issues, decimal);
display: block;
}
</style>
</head>
<body>
<div class="container">
<p class="issue">
CIAO
</p>
<p class="issue">
Questo è un
</p>
<p class="issue">
contenuto per
</p>
<p class="issue">
mettere alla prova CSS counter
</p>
</div>
</body>
</html>
Abbiamo una serie di div, e due regole CSS.
La prima fa un reset del counter, in modo da inizializzarlo in caricamento di pagina.
La seconda imposta il counter:
- counter-increment dice cosa incrementare e di quanto
- content imposta il contenuto
Tutto qua, provare per credere.
Enjoy!
html css counter counter-reset counter-increment
Commentami!