Cara Mengubah Warna Bullet

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara mengubah warna bullet untuk suatu daftar/list dengan CSS.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
  list-style: none;
}

ul li::before {
  content: "\2022";
  color: gold;
  font-weight: bold;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
}
</style>
</head>
<body>

<h2>Ubah Warna Bullet dari List Item Di Bawah</h2>

<ul>
  <li>When We Were Young</li>
  <li>Someone Like You</li>
  <li>Million Years Ago</li>
  <li>Rolling In The Deep</li>
</ul>

</body>
</html>

Ubah Warna Bullet

Langkah 1) Tambahkan HTML:
Buat daftar dasar:
Contoh

<ul>
  <li>When We Were Young</li>
  <li>Someone Like You</li>
  <li>Million Years Ago</li>
  <li>Rolling In The Deep</li>
</ul>

Langkah 2) Tambahkan CSS:
Secara default, tidak mungkin untuk mengubah warna poin dari item daftar. Namun, kita bisa melakukan beberapa trik CSS untuk membuatnya mungkin. Kita akan ubah mengubahnya dengan menggunakan framework CSS ataupun special stylesheet:
Contoh

ul {
  list-style: none; /* Hapus bullets secara default */
}

ul li::before {
  content: "\2022";  /* Tambahkan konten: \ 2022 adalah Kode CSS / unicode untuk poin */
  color: red; /* Ubah warnanya */
  font-weight: bold; /* Jika Anda ingin font tebal */
  display: inline-block; /* Diperlukan untuk menambahkan spasi antara poin dan teks */
  width: 1em; /* Juga dibutuhkan untuk ruang (tweak jika diperlukan) */
  margin-left: -1em; /*Juga dibutuhkan untuk ruang (tweak jika diperlukan) */
}