Bagaimana Menukar Warna Peluru dalam Senarai HTML Tanpa Imej atau Teg Tambahan?

Cara Menyesuaikan Warna Bullet dalam Senarai HTML tanpa Menggunakan Imej atau Teg Span

Cabaran

Apabila menyesuaikan senarai HTML yang tidak diisih dengan bulet segi empat sama menggunakan gaya senarai: persegi;, seseorang mungkin menghadapi isu keseluruhan item senarai menjadi warna yang ditentukan dan bukannya hanya peluru. Ini menimbulkan persoalan: bagaimana kita mengubah suai warna peluru tanpa menggunakan imej sprite atau tag tambahan?

Penyelesaian

Penyelesaian yang mudah dan berkesan wujud:

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: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or any desired color */
}

Dalam pendekatan ini:

• gaya senarai: tiada; mengalih keluar titik lalai.
• lapik-kiri dan inden-teks melaraskan kedudukan kandungan.
• li::sebelum memasukkan peluru menggunakan sifat kandungan. Sifat warna kemudiannya menentukan warna yang diingini.

Teknik ini membolehkan penyesuaian elegan warna titik dalam senarai HTML tanpa memerlukan elemen atau imej tambahan.

Atas ialah kandungan terperinci Bagaimana Menukar Warna Peluru dalam Senarai HTML Tanpa Imej atau Teg Tambahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!