Home / Programmazione / HTML - CSS / Creare un counter con i CSS
Mattepuffo

Creare un counter con i CSS

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!