Často se mi stává, že musím na web zavěsit smlouvu nebo dokument, který má číslované strukturované nadpisy a k nim číslované bloky/odstavce textu. Smozřejmě lze text zavěsit na web tak, že se čísla napíšou do textu „natvrdo“, co když se pak ale článek změní a je třeba jeho struturu automaticky přečíslovat.

Řešení je použití čítačů v CSS:

.clanek {
  counter-reset: sekce;             /* Nejprve nastavime citac - inicializuje se vytvoreni prvku tridy clanek */
}
.clanek h2:before {              /* Pouzijeme nadpis H2, protoze H1 jsme pouzili pro nadpis clanku */
  counter-increment: sekce;      /* Zvysime citac o 1 */
  content: counter(sekce) ". ";  /* Zobrazime cislo, tecku a mezeru pred obsahem h2 */
}
.clanek ol {
  counter-reset: podsekce;         /* Nastavime citac podsekce pri pouziti ol */
  list-style-type: none;
}
.clanek li:before {
  counter-increment: podsekce;                             /* Zvysime citac podsekce o jedna */
  content: counter(sekce) "." counters(podsekce,".") ". "; /* Zobrazujeme  cislo sekce a cisla vsech podsekci oddelene . */
                                         /* Pri pouziti v IE < IE8 dejte pozor at neni mezera za carkou */
}