Simbol poin kustom untuk <li> elemen di <ul> yang merupakan karakter biasa, dan bukan gambar

Saya menyadari seseorang dapat menentukan grafik khusus untuk menjadi karakter peluru pengganti, menggunakan atribut CSS:

list-style-image

Dan kemudian memberikannya URL.

Namun, dalam kasus saya, saya hanya ingin menggunakan simbol '+'. Saya tidak ingin harus membuat grafik untuk itu dan kemudian menunjukkannya. Saya lebih suka menginstruksikan daftar tidak berurutan untuk menggunakan simbol plus sebagai simbol peluru.

Bisakah ini dilakukan atau saya terpaksa membuatnya menjadi grafik terlebih dahulu?

Berikut ini dikutip dari Daftar Penjinakan :

Mungkin ada kalanya Anda memiliki daftar, tetapi Anda tidak menginginkan poin apa pun, atau Anda ingin menggunakan karakter lain sebagai pengganti poin. Sekali lagi, CSS memberikan solusi langsung. Cukup tambahkan gaya daftar: tidak ada; ke aturan Anda dan paksa LI untuk ditampilkan dengan indentasi gantung. Aturannya akan terlihat seperti ini:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Baik padding atau margin perlu disetel ke nol, dengan yang lainnya disetel ke 1em. Bergantung pada "poin" yang Anda pilih, Anda mungkin perlu mengubah nilai ini. Teks-indentasi negatif menyebabkan baris pertama dipindahkan ke kiri sebesar itu, menciptakan indentasi gantung.

HTML akan berisi UL standar kami, tetapi dengan karakter atau entitas HTML apa pun yang ingin Anda gunakan sebagai pengganti poin sebelum konten item daftar. Dalam kasus kami, kami akan menggunakan », kutipan sudut ganda kanan:».

»Item 1
» Item 2
»Item 3
» Item 4
»Item 5 kami akan membuat
   sedikit lebih lama sehingga
   akan membungkus

Ini adalah jawaban yang terlambat, tetapi saya baru saja menemukan ini ... Untuk mendapatkan indentasi yang benar pada setiap baris yang membungkus, coba cara ini:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

Begitu banyak solusi.
Tapi saya masih berpikir masih ada ruang untuk perbaikan.

Keuntungan:

• kode yang sangat kompak
• berfungsi dengan ukuran font apa pun
  (tidak ada nilai piksel absolut yang terkandung)
• meratakan baris dengan sempurna
  (tidak ada sedikit pergeseran antara baris pertama dan baris berikutnya)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}

<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

Ini adalah solusi W3C. Berfungsi di Firefox dan Chrome.

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

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }

  <ul><li>item</li></ul>

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

ul {
    list-style: none;
    margin-left: 0;
    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.

Anda dapat menggunakan :beforepseudo-selector untuk menyisipkan konten di depan item daftar. Anda dapat menemukan contoh di Quirksmode, di http://www.quirksmode.org/css/beforeafter.html . Saya menggunakan ini untuk memasukkan kutipan besar di sekitar blockquote ...

HTH.

Solusi saya menggunakan pemosisian untuk mendapatkan garis yang dibungkus secara otomatis berbaris dengan benar. Jadi Anda tidak perlu khawatir tentang pengaturan padding-tepat pada li: sebelumnya.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}

<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Sebaiknya penataan gaya agar memenuhi syarat <li>agar tidak memengaruhi <ol>item daftar. Begitu:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

Font-awesome memberikan solusi hebat di luar kotak:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>

Gaya tanda pisah:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

Saya lebih suka menggunakan margin negatif, memberi Anda lebih banyak kendali

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

Yang cukup menarik, saya tidak menganggap salah satu solusi yang diposting cukup baik, karena mereka bergantung pada fakta bahwa karakter yang digunakan lebar 1em, yang tidak perlu begitu (dengan pengecualian jawaban John Magnolia yang bagaimanapun menggunakan pelampung yang dapat mempersulit hal-hal dengan cara lain). Inilah usaha saya:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Ini memiliki keunggulan berikut (dibandingkan solusi lain):

1. Itu tidak bergantung pada lebar simbol seperti yang Anda lihat di contoh. Saya menggunakan dua karakter untuk menunjukkan bahwa itu berfungsi bahkan dengan peluru lebar. Jika Anda mencoba ini di solusi lain, Anda mendapatkan teks yang tidak sejajar (bahkan terlihat dengan simbol * dalam zoom yang lebih tinggi).
2. Ini memberi Anda kendali penuh atas ruang yang digunakan oleh peluru . Anda dapat mengganti 30px dengan apapun (bahkan 1em dll). Hanya saja, jangan lupa untuk mengubahnya di ketiga tempat tersebut.
3. Jika memberi Anda kendali penuh atas posisi peluru . Cukup ganti text-align: center;dengan apa pun yang Anda sukai. Misalnya Anda dapat mencoba color: red; text-align: right; padding-right: 5px; box-sizing: border-box; atau jika Anda tidak suka bermain dengan border-box, kurangi padding (5px) dari width (misal: width: 25px dalam contoh ini). Ada banyak pilihan.
4. Tidak menggunakan pelampung sehingga bisa ditampung dimana saja.

Nikmati.

coba ini

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    

<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>