Rumah >hujung hadapan web >tutorial css >Bolehkah Anda Sesuaikan Warna Peluru Senarai Tanpa Menggunakan Elemen ``?

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

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-15 13:08:23341semak imbas

Can You Customize List Bullet Colors Without Using a `` Element?

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;
    }
  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;
    }
  • 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn