Ubah warna poin dari daftar HTML tanpa menggunakan span

Saya ingin tahu apakah ada cara untuk mengubah warna peluru dalam daftar.

Saya punya daftar seperti ini:

<ul>
   <li>House</li>
   <li>Car</li>
   <li>Garden</li>
</ul>

Tidak mungkin bagi saya untuk memasukkan apapun ke dalam li seperti 'span' atau 'p'. Jadi dapatkah saya mengubah warna peluru tetapi tidak teksnya dengan cara yang cerdas?

Jika Anda bisa menggunakan gambar maka Anda bisa melakukan ini. Dan tanpa gambar Anda tidak akan bisa mengubah warna peluru saja dan bukan teksnya.

Menggunakan gambar

li { list-style-image: url(images/yourimage.jpg); }

Lihat

list-style-image

Tanpa menggunakan gambar

Kemudian Anda harus mengedit markup HTML dan menyertakan span di dalam daftar dan mewarnai li dan span dengan warna berbeda.

Saya berhasil ini tanpa menambahkan markup, melainkan menggunakan li:before. Ini jelas memiliki semua batasan :before(tidak ada dukungan IE lama), tetapi tampaknya berfungsi dengan IE8, Firefox dan Chrome setelah beberapa pengujian yang sangat terbatas. Gaya peluru juga dibatasi oleh apa yang ada di unicode.

li {
  list-style: none;
}
li:before {
  /* For a round bullet */
  content: '\2022';
  /* For a square bullet */
  /*content:'\25A0';*/
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

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

Kita bisa kombinasikan list-style-imagedengan svgs, yang bisa kita inline di css ! Metode ini menawarkan kendali luar biasa atas "peluru", yang bisa menjadi apa saja.

Untuk mendapatkan lingkaran merah, cukup gunakan css berikut:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}

Tapi ini baru permulaan. Ini memungkinkan kita melakukan hal gila yang kita inginkan dengan peluru itu. lingkaran atau persegi panjang itu mudah, tetapi apa pun yang bisa Anda gambar dengan svgAnda bisa menempel di sana! Lihat contoh bullseye di bawah ini:

ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}

<ul>
  <li>
    Big circles!

    <ul>
      <li>Big rectangles!</li>
      <li>b
        <ul>
          <li>Small circles!</li>
          <li>c
            <ul>
              <li>Small rectangles!</li>
              <li>b</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>b</li>
</ul>

<ul class="bulls-eye">
  <li>Bulls</li>
  <li>eyes.</li>
</ul>

<ul class="multi-color">
  <li>Multi</li>
  <li>color</li>
</ul>

Atribut lebar / tinggi

Beberapa browser memerlukan widthdan heightatribut untuk disetel pada <svg>, atau mereka tidak menampilkan apa pun. Pada saat penulisan, versi terbaru Firefox menunjukkan masalah ini. Saya telah menetapkan kedua atribut dalam contoh.

Pengodean

Sebuah komentar baru-baru ini mengingatkan saya pada pengkodean untuk data-uri. Ini adalah masalah bagi saya baru-baru ini, dan saya dapat berbagi sedikit informasi yang telah saya teliti.

Spesifikasi data-uri , yang mereferensikan spesifikasi URI , mengatakan bahwa svg harus dikodekan sesuai dengan spesifikasi URI . Itu berarti semua jenis karakter harus dikodekan, misalnya <menjadi %3C.

Beberapa sumber menyarankan pengkodean base64, yang seharusnya memperbaiki masalah pengkodean, namun ini akan meningkatkan ukuran SVG secara tidak perlu, sedangkan pengkodean URI tidak akan. Saya merekomendasikan pengkodean URI.

Info lebih lanjut:

dukungan-browser: > ie8

trik css di svgs

mdn pada svgs

Membangun solusi @ Marc - karena karakter peluru ditampilkan secara berbeda dengan font dan browser yang berbeda, saya menggunakan teknik css3 berikut dengan border-radius untuk membuat poin yang lebih saya kendalikan:

li:before {
    content: '';
    background-color: #898989;
    display: inline-block;
    position: relative;
    height: 12px;
    width: 12px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    margin-right: 4px;
    top: 2px;
}

Saya tahu ini adalah pertanyaan yang sangat, sangat, lama tetapi saya bermain-main dengan ini dan muncul dengan cara yang belum saya lihat diposting. Beri warna pada daftar lalu timpa warna teks menggunakan ::first-lineselektor. Saya bukan ahli jadi mungkin ada sesuatu yang salah dengan pendekatan ini yang saya lewatkan, tetapi tampaknya berhasil.

li {
  color: blue;
}

li::first-line {
  color: black;
}

<ul>
  <li>House</li>
  <li>Car</li>
  <li>Garden</li>
</ul>

Membangun solusi @Marc dan @jessica - Ini adalah solusi yang saya gunakan:

li { 
   position:relative;
}
li:before {
      content:'';
      display: block;
      position: absolute;
      width: 6px;
      height:6px;
      border-radius:6px;
      left: -20px;
      top: .5em;
      background-color: #000;
}

Saya menggunakan emuntuk ukuran font jadi jika Anda menetapkan topnilai Anda menjadi .5emitu akan selalu ditempatkan ke titik tengah baris pertama teks Anda. Saya menggunakan left:-20pxkarena itu adalah posisi default peluru di browser: induk padding/2

Saya sangat menyukai jawaban Marc juga - saya membutuhkan satu set UL berwarna berbeda dan jelas akan lebih mudah hanya menggunakan kelas. Inilah yang saya gunakan untuk jeruk, misalnya:

ul.orange {
    list-style: none;
    padding: 0px;
}
ul.orange > li:before {
    content: '\25CF ';
    font-size: 15px;
    color: #F00;
    margin-right: 10px;
    padding: 0px;
    line-height: 15px;
}

Ditambah lagi, saya menemukan bahwa kode hex yang saya gunakan untuk "content:" berbeda dari Marc (lingkaran hex itu kelihatannya terlalu tinggi). Yang saya gunakan sepertinya duduk dengan sempurna di tengah. Saya juga menemukan beberapa bentuk lain (kotak, segitiga, lingkaran, dll.) Di sini

Bagi saya, opsi terbaik adalah menggunakan elemen pseudo CSS, jadi untuk discgaya peluru akan terlihat seperti itu:

ul {
  list-style-type: none;
}

li {
  position: relative;
}

li:before {
  content: '';
  display: block;
  position: absolute;
  width: 5px; /* adjust to suit your needs */
  height: 5px; /* adjust to suit your needs */
  border-radius: 50%;
  left: -15px; /* adjust to suit your needs */
  top: 0.5em;
  background: #f00; /* adjust to suit your needs */
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

Catatan:

• width dan height harus memiliki nilai yang sama untuk menjaga agar petunjuk tetap bulat
• Anda dapat mengatur border-radiuske nol jika Anda inginsquare peluru daftar

Untuk lebih banyak gaya poin, Anda dapat menggunakan bentuk css lainnya https://css-tricks.com/examples/ShapesOfCSS/ (pilih ini yang tidak memerlukan elemen semu untuk bekerja, jadi misalnya segitiga)

:: penanda

Anda dapat menggunakan ::markerelemen semu CSS untuk memilih kotak penanda dari item daftar (mis. Poin atau angka).

ul li::marker {
  color: red;
}

Catatan: Pada saat memposting jawaban ini, ini dianggap sebagai teknologi eksperimental dan baru diterapkan di Firefox dan Safari (sejauh ini).

Berdasarkan jawaban @ ddilsaver. Saya ingin bisa menggunakan sprite untuk peluru. Ini tampaknya berhasil:

li {
  list-style: none;
  position: relative;
}

li:before {
  content:'';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: -30px;
  top: 5px;
  background-image: url(i20.png); 
  background-position: 0px -40px; /* or whatever offset you want */
}

Saya mencoba ini hari ini dan mengetik ini:
Saya perlu menampilkan penanda warna dalam daftar saya (baik peluru maupun angka). Saya menemukan tip ini dan menulis di stylesheet saya dengan sifat saling menguntungkan:

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
}
ul {}
ol {
  counter-reset: li;
}
li {
  padding-left: 1em; 
}
ul li {}
ul li::before,
ol li::before {
  color: #91be3c;
  display: inline-block;
  width: 1em;
}
ul li::before {
  content: "\25CF";
  margin: 0 0.1em 0 -1.1em;
}
ol li {
  counter-increment: li;
}
ol li::before {
  content: counter(li);
  margin: 0 0 0 -1em;
}

Saya memilih karakter yang berbeda untuk menampilkan peluru, menontonnya di sini . Saya perlu menyesuaikan margin dengan benar, mungkin nilai tidak akan berlaku dengan font yang Anda pilih (angka menggunakan font web Anda).

Coba gunakan ini sebagai gantinya:

ul {
  color: red;
}

Versi sebaris, berfungsi untuk Outlook Desktop:

<ul style="list-style:square;">
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
  <li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>

JSFiddle .