CSS Counter Part III
Hallo teman-teman di kesempatan kali ini saya akan membahas cara pemakaian CSS Counter Part III. Sebelumnya di bahan CSS Counter Part I dan CSS Counter Part II telah dibahas mengenai CSS Counter itu sendiri dan telah dipraktekan.
Baca artikel sebelumnya :
Disini saya akan merancang css counter yang berbeda di bahan sebelumnya, kalau yang sebelumnya hanya penomoran standard dan sub-nomor kalau kali ini masih sama mengenai penomoran cuman berbeda di bahan sebelumnya.
Baca artikel sebelumnya : CSS Counter Part I dan CSS Counter Part II
Oke agar lebih memahaminya seketika saja tanpa panjangan lebar lagi, pertama-tama seperti lazimnya siapkan text-editornya dan browsernya lalu ketik script HTML dibawah ini kedalam text-editor yang teman-teman gunakan :
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
Apabila telah simpan file htmlnya dan penamaan filenya terserah teman-teman intinya jangan lupa extensionnya mesti .html, kemudian langkah berikutnya teman-teman masukan script CSS dibawah ini dan jangan lupa extensionnya bagi css ialah .css :
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,.) ;
}
Apabila script HTML dan CSS nya telah silahkan teman-teman simpan dan jalankan di browser yang teman-teman gunakan. Apabila telah karenanya hasilnya di browser akan menjadi seperti di gambar dibawah ini :
Oke bila hasil yang didapat telah seperti di gambar diatas karenanya teman-teman dinyatakan telah berhasil pada merancang CSS Counter Part III.
Demikian pembahasan singkat mengenai pemakaian CSS Counter Part III ini semoga dapat bermanfaat untuk teman-teman. Dan jangan lupa tunggu part-part berikutnya.
Terimakasih
Sumber https://kursuswebsite.org