Bagaimana Saya Boleh Menukar Warna Bullet Senarai dalam HTML Tanpa Menggunakan Span?

Menukar Warna Bulet Senarai Tanpa Span

Dalam HTML, menyesuaikan warna bulet senarai boleh menjadi satu cabaran. Walaupun mungkin untuk menyertakan item senarai dalam rentang, ini mungkin bukan pilihan dalam senario tertentu. Soalan ini mencari penyelesaian yang mengubah suai warna titik tanpa menambah penanda tambahan.

Untuk mencapai matlamat ini, jawapannya memanfaatkan elemen li:sebelum pseudo CSS. Dengan menetapkan gaya senarai: tiada untuk elemen li, titik tumpu lalai dialih keluar. Elemen li:before kemudiannya digunakan untuk memaparkan bullet tersuai menggunakan sifat kandungan untuk menentukan aksara unicode. Sifat warna menetapkan warna titik yang diingini.

Berikut ialah kod CSS:

li {
  list-style: none;
}

li:before {
  content: '22'; /* For a round bullet */
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

Untuk menggunakan penyelesaian ini, hanya gunakan gaya CSS pada senarai anda seperti berikut:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Teknik ini membolehkan anda menukar warna peluru tanpa mengubah suai kandungan item senarai atau menambah penanda tambahan, menyediakan cara yang fleksibel untuk menyesuaikan HTML anda senarai.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menukar Warna Bullet Senarai dalam HTML Tanpa Menggunakan Span?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!