Bolehkah Anda Sesuaikan Warna Peluru Senarai Tanpa Menggunakan Elemen ``?

Cara Menyesuaikan Bulet Senarai Tanpa Span

Dalam HTML, senarai bullet menyediakan cara yang ringkas dan teratur untuk mempersembahkan item. Walau bagaimanapun, secara lalai, gaya peluru adalah terhad dan tidak boleh diubah tanpa menambah elemen tambahan seperti span.

Bolehkah Anda Menukar Warna Bullet Senarai Tanpa Menggunakan Span?

Ya, adalah mungkin untuk mengubah suai warna peluru menggunakan CSS dan :before pseudo-element, tanpa memerlukan penanda tambahan dalam senarai item.

Pelaksanaan

1. Alih keluar gaya titik tumpu lalai:

   li {
     list-style: none;
   }

   Salin selepas log masuk

2. Sisipkan a :sebelum pseudo-element untuk memaparkan adat bullet:

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

   Salin selepas log masuk

• kandungan: Menentukan aksara Unicode untuk bentuk peluru yang diingini.
• warna: Tetapkan peluru warna.
• saiz fon: Melaraskan saiz peluru.

Nota: Kaedah ini berfungsi dengan baik dalam penyemak imbas moden tetapi mungkin tidak serasi dengan versi IE yang lebih lama.

Contoh HTML

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

Atas ialah kandungan terperinci Bolehkah Anda Sesuaikan Warna Peluru Senarai Tanpa Menggunakan Elemen ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!