fungsi counters() CSS

definisi dan penggunaan

CSS counters() fungsi mengembalikan nilai saat ini penhitungan yang dinamai dan nested counter dalam bentuk string.

di sini, kami menggunakan counters() fungsi menempatkan string di antara penhitungan nested level yang berbeda.

contoh

contoh 1

di sini, kami menggunakan counters() fungsi menempatkan string di antara penhitungan nested level yang berbeda (sebuah titik):

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

coba sendiri

contoh 2

atur gaya penhitungan counter dan atur string penghubung menjadi "-":

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

coba sendiri

syntaks CSS

counters(countername, string, counterstyle)
nilai deskripsi
countername

diperlukan. nama penhitungan (sama seperti yang digunakan dalam atribut counter-reset dan counter-increment).

perhatian: nama berbeda huruf besar kecil.

string diperlukan. string penghubung. boleh berupa karakter teks apapun.
counterstyle

pilihan. gaya penhitungan (boleh berupa nilai list-style-type, nama @counter-style, atau fungsi symbols()).

nilai baku adalah decimal.

detil teknis

versi: CSS3

dukungan browser

Chrome Edge Firefox Safari Opera
dukungan dukungan dukungan dukungan dukungan

halaman yang relevan

Panduan:Penghitung CSS

Referensi:Atribut content CSS

Referensi:Atribut counter-increment CSS

Referensi:Atribut counter-reset CSS

Referensi:Atur @counter-style CSS

Referensi:Fungsi counter() CSS