Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menyesuaikan Warna Peluru dalam Senarai HTML Menggunakan CSS?

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

Patricia Arquette
Patricia Arquetteasal
2024-12-11 03:27:09705semak imbas

How Can I Customize Bullet Colors in HTML Lists Using 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!

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