Fungsi counter() CSS

Definisi dan penggunaan

counter() Fungsi mengembalikan nilai penhitungan saat ini untuk penhitungan yang ditentukan dalam bentuk string.

Contoh

Contoh 1

Buat penhitungan untuk halaman (pada pemilih body). Tambahkan nilai penhitungan untuk setiap elemen <h2> dan tambahkan teks "bab ke-" di depan setiap elemen <h2>:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Coba sendiri

Contoh 2

Atur gaya penhitungan:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section, upper-roman) ": ";
}

Coba sendiri

CSS Grammar

counter(countername, counterstyle)
Nilai Deskripsi
countername

Diperlukan. Nama penhitungan (sama seperti yang digunakan dalam atribut counter-reset dan counter-increment).

Perhatian, nama membedakan huruf besar dan kecil.
counterstyle

Dipilih. Gaya penhitungan (bisa nilai list-style-type, nama @counter-style, atau fungsi symbols()).

Nilai baku adalah desimal.

Detil teknis

Versi: CSS3

Pendukung peramban

Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Halaman Terkait

Panduan：Penyensor CSS

Referensi：Atribut content CSS

Referensi：Atribut counter-increment CSS

Referensi：Atribut counter-reset CSS

Referensi：Atur @counter-style CSS

Referensi：Fungsi counters() CSS