Propriedade counter-increment

A propriedade counter-increment define a numeração automática de elementos, por exemplo, parágrafos ou cabeçalhos. É usada em conjunto com a propriedade counter-reset, os pseudoelementos after e before, a propriedade content, dentro da qual é usada a função counter. Para um melhor entendimento, recomendo ver os exemplos.

Sintaxe

cssseletor {
  counter-increment: nome [incremento] | none;
}

Valores

Valor padrão: none.

Exemplo

Vamos fazer com que os parágrafos sejam numerados automaticamente:

html<div id="parent">
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Exemplo

Suponha que, além da numeração, algum texto adicional seja adicionado. No nosso caso, № antes do dígito e um ponto depois:

html<div id="parent">
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Exemplo

Vamos iniciar a numeração a partir do 10. Para isso definimos o valor inicial do contador como nove, ou seja, 1 a menos do que precisamos:

html<div id="parent">
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Exemplo

Suponha que agora a numeração tenha um incremento de "2". Para isso, definimos o incremento como dois:

html<div id="parent">
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* definimos o incremento como dois */
  content: "№" counter(test) ".";
}

Результат:

Exemplo

No exemplo anterior, a numeração começou com dois, mas gostaríamos que começasse com um. Por que isso aconteceu? Porque counter-reset redefine o valor do contador para zero, e então counter-increment adiciona seu incremento: por padrão, um, por isso antes a nossa numeração começava com 1. Agora é adicionado dois - e a numeração começa com dois.

Para corrigir o problema, vamos definir o valor inicial do contador como -1 e agora a numeração começará com 1 e será incrementada em 2:

html<div id="parent">
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
  <p>texto</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Veja também