Propiedad counter-increment

La propiedad counter-increment establece la numeración automática de elementos, por ejemplo, párrafos o encabezados. Se utiliza junto con la propiedad counter-reset, los pseudoelementos after y before, la propiedad content, dentro de la cual se utiliza la función counter. Para una mejor comprensión, recomiendo ver los ejemplos.

Sintaxis

cssselector {
  counter-increment: nombre [incremento] | none;
}

Valores

Valor por defecto: none.

Ejemplo

Hagamos que los párrafos se numeren automáticamente:

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);
}

Результат:

Ejemplo

Supongamos que además de la numeración se añade algún otro texto. En nuestro caso, № antes del número y un punto después:

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) ".";
}

Результат:

Ejemplo

Comencemos la numeración desde 10. Para ello establecemos el valor inicial del contador en nueve, es decir, en 1 menos de lo que necesitamos:

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) ".";
}

Результат:

Ejemplo

Supongamos que ahora la numeración sea con un incremento de "2". Para ello, establecemos dos como incremento:

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; /* establecemos dos */
  content: "№" counter(test) ".";
}

Результат:

Ejemplo

En el ejemplo anterior, la numeración comenzó desde dos, pero nos gustaría que fuera desde uno. ¿Por qué sucedió esto? Porque counter-reset restablece el valor del contador a cero, y luego counter-increment añade su incremento: por defecto uno, por eso antes nuestra numeración comenzaba desde 1. Pero ahora se suma dos - y la numeración comienza desde dos.

Para solucionar el problema, establezcamos el valor inicial del contador en -1 y ahora la numeración comenzará desde 1 y se incrementará en 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) ".";
}

Результат:

Véase también