Saya perlu menggunakan, misalnya, simbol bintang (★) sebagai peluru untuk item daftar.

Saya telah membaca modul CSS3: Daftar , yang menjelaskan, cara menggunakan teks kustom sebagai poin, tetapi tidak berhasil untuk saya. Saya pikir, browser tidak mendukung ::markerelemen pseudo.

Bagaimana saya bisa melakukannya, tanpa menggunakan gambar?

EDIT

Saya mungkin tidak akan merekomendasikan menggunakan gambar lagi. Saya akan tetap menggunakan pendekatan menggunakan karakter Unicode, seperti ini:

li:before {
  content: "\2605";
}

JAWABAN LAMA

Saya mungkin akan menggunakan gambar latar belakang, mereka jauh lebih efisien dan serbaguna dan ramah lintas-browser.

Berikut contohnya:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

Menggunakan Teks Sebagai Peluru

Gunakan li:beforedengan Entitas HTML Hex yang lolos (atau teks biasa apa pun).

Contoh

Contoh saya akan menghasilkan daftar dengan tanda centang sebagai peluru.

CSS :

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

Kompatibilitas Browser

Belum menguji diri saya sendiri, tetapi harus didukung pada IE8. Setidaknya itulah yang dikatakan oleh quirksmode & css-trick .

Anda dapat menggunakan komentar bersyarat untuk menerapkan solusi yang lebih lama / lebih lambat seperti gambar, atau skrip. Lebih baik lagi, gunakan keduanya dengan <noscript>untuk gambar.

HTML :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

Tentang gambar latar belakang

Gambar latar belakang memang mudah ditangani, tetapi ...

1. Dukungan browser background-sizesebenarnya hanya untuk IE9.
2. Warna teks HTML dan font khusus ( gila ) dapat melakukan banyak hal, dengan lebih sedikit permintaan HTTP.
3. Solusi skrip hanya dapat menyuntikkan Entitas HTML, dan membiarkan CSS yang sama melakukan pekerjaannya.
4. Penyetelan ulang kode CSS yang baik mungkin membuat list-style(pilihan yang lebih logis) lebih mudah.

Nikmati.

Anda dapat membangunnya:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

Ini adalah solusi W3C. Anda dapat menggunakannya di 3012!

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.csswg.org/css-lists/#text-markers

Gambar tidak disarankan karena mungkin muncul piksel di beberapa perangkat (perangkat Apple dengan layar Retina) atau saat diperbesar. Dengan karakter, daftar Anda terlihat mengagumkan setiap saat.

Inilah solusi terbaik yang saya temukan sejauh ini. Ini berfungsi dengan baik dan lintas-browser (IE 8+).

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

Yang penting adalah memiliki karakter dalam blok mengambang dengan lebar tetap sehingga teks tetap sejajar jika terlalu panjang untuk muat dalam satu baris. 1.2em adalah lebar yang Anda inginkan untuk karakter Anda, ubah sesuai kebutuhan Anda. Jangan lupa untuk mengatur ulang padding dan margin untuk elemen ul dan li.

EDIT: Perhatikan bahwa ukuran "1.2em" dapat bervariasi jika Anda menggunakan font yang berbeda di ul dan li: before. Lebih aman menggunakan piksel.

Untuk menambahkan bintang, gunakan karakter Unicode 22C6.

Saya menambahkan spasi untuk membuat sedikit celah antara bintang lidan bintang. Kode untuk spasi adalah A0.

li:before {
    content: '\22C6\A0';
}

Contoh yang lebih lengkap dari jawaban 222 :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

Saya telah menyertakan properti peretasan bintang untuk memulihkan gaya daftar default di versi IE yang lebih lama. Anda dapat menarik ini keluar dan memasukkannya dalam penyertaan bersyarat jika diinginkan, atau mengganti dengan solusi berbasis gambar latar belakang. Pendapat saya yang sederhana adalah bahwa gaya peluru khusus yang diterapkan dengan cara ini harus menurunkan dengan baik pada beberapa browser yang tidak mendukung pseudoselectors.

Diuji di Firefox, Chrome, Safari, dan IE8-10 dan dirender dengan benar di semua.

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

Saya telah melalui seluruh daftar ini dan ada elemen yang benar sebagian dan sebagian salah hingga, pada tahun 2020.

Saya menemukan bahwa indentasi dan offset adalah masalah terbesar saat menggunakan UTF-8, jadi saya memposting ini sebagai solusi CSS yang kompatibel tahun 2020 menggunakan poin "segitiga tegak" sebagai contoh saya.

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

digunakan emsebagai unit untuk menghindari konflik dengan ukuran font

Coba kode ini ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

Topik ini mungkin sudah lama, tapi berikut perbaikan singkatnya ul {list-style:outside none square;}atau ul {list-style:outside none disc;}, dll ...

lalu tambahkan padding kiri ke elemen daftar

ul li{line-height: 1.4;padding-bottom: 6px;}