Função contador () de CSS
Exemplo
Crie um contador para a página (no seletor de corpo). Incremente o valor do contador para cada elemento <h2> e adicione o texto "Section < value of the counter >:" antes de cada elemento <h2>:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A função counter() retorna o valor atual do contador nomeado, como uma string.
Versão: | CSS3 |
---|
Suporte ao navegador
Function | |||||
---|---|---|---|---|---|
counter() | Yes | Yes | Yes | Yes | Yes |
Sintaxe CSS
counter(countername,
counterstyle)
Value | Description |
---|---|
countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties) |
counterstyle | Optional. The style of the counter (can be a list-style-type value) |
Mais exemplos
Exemplo
Defina o estilo do contador:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
Páginas relacionadas
Referência CSS: propriedade de conteúdo
Referência CSS: propriedade counter-increment
Referência CSS: propriedade counter-reset