Using CSS counters

Contadores CSS são em essência, as variáveis mantidas pelo CSS cujos valores podem ser incrementado por regras do CSS para controlar quantas vezes eles são usados.Isso permite ajustar a aparência do conteúdo com base na sua colocação no documento. contadores CSS são uma implementação de Contadores automáticos e numeração em CSS 2.1.

O valor de um contador é manipulado através da utilização de counter-reset. counter-increment pode ser exibido em uma página usando o counter() ou counters() função da propriedade de conteúdo.

Usando contadores

Para usar um contador, tem quer definir um valor para ele (ele é 0 default). Para adicionar o valor do contador em um elemento, use a função counter(). O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.

css
body {
  counter-reset: section; /* Set the section counter to 0 */
}
h3::before {
  counter-increment: section; /* Increment the section counter*/
  content: "Section" counter(section) ": "; /* Display the counter */
}

Exemplo:

html
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

Nesting counters

Um contador CSS pode ser especialmente útil para fazer listas descritas porque uma nova instância de um contador CSS é criado automaticamente em elementos filho . Usando a função counters(), uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta CSS :

css
ol {
  counter-reset: section; /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}
li::before {
  counter-increment: section; /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " "; /* Adds the value of all instances
                                            of the section counter separated
                                            by a ".". */
  /* if you need to support < IE8 then
                                            make sure there is no space after
                                            the ',' */
}

Combinado com o seguinte HTML:

html
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

Produz este resultado:

Especificações

Specification
CSS Lists and Counters Module Level 3
# auto-numbering

Veja mais