Bagaimanakah Saya Boleh Menyesuaikan Warna Peluru dalam Senarai HTML Menggunakan CSS?

Menyesuaikan Warna Bullet dalam Senarai HTML dengan CSS

Dalam senarai HTML, menyesuaikan penampilan bullet boleh meningkatkan daya tarikan visual kandungan. Walau bagaimanapun, menetapkan warna item senarai menggunakan CSS mempengaruhi kedua-dua teks dan titik tumpu. Untuk penyelesaian yang lebih elegan, pertimbangkan pendekatan berikut:

Buat gaya CSS baharu untuk senarai tidak tertib (

). Lumpuhkan titik tumpu lalai dengan menetapkan gaya senarai: tiada;.

Untuk setiap item senarai (

• ), tambahkan padding di sebelah kiri dan inden teks negatif untuk mengimbangi kandungan daripada titik tumpu.

  Akhir sekali, gunakan elemen pseudo ::before untuk mencipta titik tersuai sebelum setiap item senarai. Anda boleh menetapkan kandungan (seperti titik atau segi empat sama) dan warna secara berasingan.

  Contoh:

  HTML

  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  CSS

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    padding-left: 1em;
    text-indent: -0.7em;
  }
  
  li::before {
    content: "• ";
    color: red; 
  }

  Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Warna Peluru dalam Senarai HTML Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!