CSS untuk List

Dalam dunia web, list adalah elemen HTML yang sering digunakan untuk menampilkan item-item yang memiliki hubungan atau urutan tertentu. HTML menyediakan dua jenis list dasar: ordered list (<ol>) dan unordered list (<ul>), beserta definition list (<dl>). Dengan CSS, kita bisa memperindah tampilan list ini, membuatnya lebih menarik dan sesuai dengan kebutuhan desain. Artikel ini akan membahas berbagai teknik styling CSS yang dapat diterapkan pada list.

1. Menghilangkan Bullet pada Unordered List

Untuk menghilangkan bullet pada unordered list, kita dapat menggunakan properti list-style-type.

ul {
    list-style-type: none;
}

• Item 1
• Item 2
• Item 3

2. Mengubah Jenis Bullet dan Penomoran

Kita dapat mengubah jenis bullet pada unordered list atau jenis penomoran pada ordered list.

ul {
    list-style-type: square;
}

ol {
    list-style-type: upper-roman;
}

• Item dengan bullet kotak
• Item dengan bullet kotak

1. Item pertama
2. Item kedua

3. Menambahkan Gambar sebagai Bullet

Kita juga bisa menambahkan gambar sebagai bullet.

ul {
    list-style-image: url('path/to/image.png');
}

• Item dengan gambar bullet
• Item dengan gambar bullet

4. Mengatur Jarak List

Kita dapat mengatur jarak antar item list dengan padding atau margin.

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 10px;
}

• Item dengan jarak
• Item dengan jarak

5. Menambahkan Background pada Item List

Memberikan warna latar belakang pada tiap item list.

li {
    background-color: #f0f0f0;
    padding: 10px;
}

• Item dengan background
• Item dengan background

6. Membuat List Horizontal

Mengatur list agar tampil horizontal dengan menggunakan display: inline.

li {
    display: inline;
    margin-right: 20px;
}

• Item Horizontal
• Item Horizontal
• Item Horizontal

7. Mengatur Style pada Definition List (<dl>)

Memberi style pada definition list.

dt {
    font-weight: bold;
}

dd {
    margin-left: 20px;
}

Istilah 1

Deskripsi istilah 1

Istilah 2

Deskripsi istilah 2

8. Mengatur List dengan Custom Counter

Membuat penomoran khusus dengan counter-reset dan counter-increment.

ol.custom-counter {
    counter-reset: section;
}

ol.custom-counter li {
    counter-increment: section;
}

ol.custom-counter li::before {
    content: "Section " counter(section) ": ";
}

1. Bagian pertama
2. Bagian kedua

9. Menggunakan Pseudo-element untuk Ikon pada List

Menambahkan ikon pada tiap item list menggunakan pseudo-element ::before.

li::before {
    content: "★";
    color: #ffa500;
}

• Item dengan ikon
• Item dengan ikon