Penghasil Penghitung CSS Buat penghitung CSS untuk daftar bernomor kustom dengan berbagai gaya dan penyusunan.

🎨

Penghasil Penghitung CSS

Buat penghitung CSS untuk daftar bernomor kustom dengan berbagai gaya dan penyusunan.

Konfigurasikan Penghitung

Tetapkan nama penghitung, gaya (desimal, romawi, alfabetik), awalan, dan akhiran.

Aktifkan Sarang

Opsional aktifkan penghitung sarang dengan karakter pemisah kustom.

Salin CSS

Pratinjau daftar bernomor dan salin CSS penghitung lengkap.

Loading tool...

What Is Penghasil Penghitung CSS?

Generator Penomoran CSS membuat daftar bernomor kustom menggunakan properti counter-reset, counter-increment, dan content dari CSS. Penghitung CSS menyediakan fleksibilitas lebih daripada penomoran daftar standar <ol>, mendukung berbagai gaya penomoran, awalan dan akhiran kustom, penomoran bersarang, dan styling yang independen dari list-style-type. Alat ini memungkinkan Anda untuk mengkonfigurasi nama penghitung, memilih dari sepuluh gaya penomoran (desimal, desimal dengan nol awal, alfabetik kecil/besar, romawi kecil/besar, Yunani, dan lain-lain), menetapkan teks awalan dan akhiran kustom, serta mengaktifkan penghitung bersarang dengan pemisah yang dapat dikonfigurasi. Pratinjau menampilkan penghitung yang diterapkan pada daftar contoh dengan konten realistis, dan CSS yang dihasilkan mencakup semua properti penghitung yang diperlukan.

Why Use Penghasil Penghitung CSS?

Sepuluh gaya penomoran termasuk desimal, romawi, dan alfabetik
Teks awalan dan akhiran kustom di sekitar nilai penghitung
Dukungan penghitung sarang dengan pemisah yang dapat dikonfigurasi
Pratinjau dengan konten daftar realistis

Common Use Cases

Dokumen Hukum

Buat bagian bernomor sarang (1.1, 1.2, 2.1) untuk dokumen hukum dan teknis.

Panduan Langkah demi Langkah

Bangun langkah-langkah bernomor kustom dengan penghitung yang diberi gaya untuk tutorial.

Daftar Isi

Generate penomoran hierarkis untuk daftar isi dokumen.

Daftar Terurut Kustom

Ganti penomoran daftar default dengan penghitung kustom yang diberi gaya.

Technical Guide

Penghitung CSS menggunakan tiga properti utama: counter-reset menginisialisasi penghitung pada elemen induk, counter-increment meningkatkan penghitung pada elemen anak, dan counter() atau counters() dalam properti content menampilkan nilai. Properti counter-reset membuat instance penghitung baru: counter-reset: section. Properti counter-increment memajukannya: counter-increment: section. Properti content pada pseudo-elemen ::before menampilkan penghitung: content: counter(section). Fungsi counter() menerima argumen gaya opsional: counter(section, upper-roman). Untuk penghitung bersarang, setiap tingkat mereset sub-penghitungnya sendiri. Fungsi counters() (perhatikan 's') menangani ruang lingkup yang bersarang: counters(section, ".") menghasilkan notasi "1.2.3". Jenis gaya daftar yang tersedia termasuk desimal, desimal dengan nol awal, alfabetik kecil, alfabetik besar, romawi kecil, romawi besar, Yunani kecil, dan lain-lain. Banyak penghitung dapat didefinisikan dan digunakan secara independen.

Tips & Best Practices

1
Gunakan counter-reset pada elemen induk, counter-increment pada anak-anak
2
Gunakan counters() dengan pemisah untuk penomoran sarang seperti 1.1.1
3
Teks awalan dan akhiran kustom membuat penghitung cocok untuk dokumen hukum
4
CSS penghitung bekerja dengan elemen apa pun, tidak hanya daftar

Related Tools

Pembuat Tabel CSS

Buat tabel HTML yang cantik dengan warna, garis-garis, dan efek hover yang dapat disesuaikan.

🎨 CSS & Design

Generator Skala Tipografi

Buat skala tipografi modular dengan ukuran dasar, rasio, dan satuan yang dapat disesuaikan.

🎨 CSS & Design

Pembuat Variabel CSS

Buat properti kustom CSS (variabel) untuk warna, spasi, dan tipografi.

🎨 CSS & Design

Pembuat Lembar Gaya Cetak

Buat lembar gaya @media cetak dengan opsi untuk menyembunyikan elemen, mengatur gaya teks, dan mengontrol pemutusan halaman.

🎨 CSS & Design

Frequently Asked Questions

Q Apa perbedaan antara counter() dan counters()?

counter() menampilkan nilai penghitung tunggal. counters() menampilkan nilai penghitung sarang dengan string pemisah.

Q Bisakah saya menggunakan CSS penghitung pada elemen apa pun?

Ya, CSS penghitung bekerja pada elemen apa pun, tidak hanya elemen <ol> atau <li>.

Q Bagaimana cara mengatur ulang penghitung?

Terapkan counter-reset pada elemen induk. Penghitung dimulai dari 0 (increment pertama membuatnya menjadi 1).

Q Bisakah saya memulai penomoran dari angka tertentu?

Ya, gunakan counter-reset: bagian 5 untuk memulai dari 5 (tampilan pertama akan menjadi 6).

Q Apakah CSS penghitung dapat diakses?

CSS penghitung dalam konten ::before dibaca oleh kebanyakan pembaca layar, tetapi mungkin tidak konsisten. Gunakan daftar HTML semantik jika memungkinkan.

About This Tool

Penghasil Penghitung CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.