<ul> içindeki bir resim değil normal bir karakter olan <li> öğeler için özel madde işareti simgesi

CSS özelliğini kullanarak bir yedek madde işareti karakteri olarak özel bir grafik belirtebileceğini fark ettim:

list-style-image

Ve sonra ona bir URL veriyor.

Ancak benim durumumda sadece '+' sembolünü kullanmak istiyorum. Bunun için bir grafik oluşturup sonra ona işaret etmek zorunda kalmak istemiyorum. Sırasız listeye, madde işareti simgesi olarak artı simgesi kullanması talimatını vermeyi tercih ederim.

Bu yapılabilir mi yoksa önce bir grafik yapmak zorunda mıyım?

Aşağıdakiler Taming Listelerinden alıntılanmıştır :

Bir listenizin olduğu, ancak herhangi bir mermi istemediğiniz ya da mermi yerine başka bir karakter kullanmak istediğiniz zamanlar olabilir. Yine, CSS basit bir çözüm sağlar. Basitçe liste stili ekleyin: yok; kuralınıza uyun ve LI'leri asılı girintilerle görüntülenmeye zorlayın. Kural şuna benzer:

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

Ya dolgu ya da kenar boşluğu sıfır olarak ayarlanmalı, diğeri 1em olarak ayarlanmalıdır. Seçtiğiniz "madde işaretine" bağlı olarak bu değeri değiştirmeniz gerekebilir. Negatif metin girintisi, ilk satırın bu miktarda sola taşınmasına neden olarak asılı bir girinti oluşturur.

HTML, standart UL'mizi içerecektir, ancak liste öğesinin içeriğinden önce gelen madde işareti yerine kullanmak istediğiniz karakter veya HTML varlığıyla birlikte. Bizim durumumuzda », dik açılı alıntı:» kullanacağız.

»Öğe 1
» Öğe 2
»Öğe 3
» Öğe 4
»Öğe 5    , sarılması
   için biraz daha uzun
yapacağız

Bu geç bir cevap, ancak bununla karşılaştım ... Saran herhangi bir satırdaki girintiyi doğru yapmak için, şu şekilde deneyin:

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

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

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

Çok fazla çözüm.
Ama yine de iyileştirme için yer olduğunu düşünüyorum.

Avantajları:

• çok kompakt kod
• herhangi bir yazı tipi boyutuyla çalışır
  (mutlak piksel değeri içermez)
• satırları mükemmel şekilde hizalar
  (ilk satır ile sonraki satırlar arasında hafif bir kayma olmaz)

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>

Bu, W3C çözümüdür. Firefox ve Chrome'da çalışır.

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>

İşte şimdiye kadar bulduğum en iyi çözüm. Harika çalışıyor ve tarayıcılar arası (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;
}

Önemli olan, karakterin sabit genişlikte kayan bir blokta olması, böylece tek bir satıra sığmayacak kadar uzunsa metnin hizalı kalmasıdır. 1.2em karakteriniz için istediğiniz genişliktir, ihtiyaçlarınız için değiştirin.

:beforeListe öğesinin önüne içerik eklemek için sözde seçiciyi kullanabilirsiniz. Quirksmode ile ilgili bir örneği http://www.quirksmode.org/css/beforeafter.html adresinde bulabilirsiniz . Bunu blok alıntıların etrafına dev alıntılar eklemek için kullanıyorum ...

HTH.

Çözümüm, sarılmış çizgilerin otomatik olarak doğru şekilde sıralanması için konumlandırmayı kullanıyor. Bu yüzden li: before 'de padding-right'ı ayarlama konusunda endişelenmenize gerek yok.

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>

Font-awesome, kutudan çıkar çıkmaz harika bir çözüm sunar:

<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>

Liste öğelerini <li>etkilememesi için stilinin nitelendirilmesi önerilir <ol>. Yani:

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

Uzun çizgi stili:

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

Negatif kenar boşluğu kullanmayı tercih ederim, size daha fazla kontrol sağlar

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

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

İlginçtir ki, yayınlanan çözümlerin hiçbirinin yeterince iyi olduğunu düşünmüyorum, çünkü kullanılan karakterin 1em genişliğinde olduğu gerçeğine güveniyorlar, ki böyle olması gerekmiyor (belki John Magnolia'nın cevabı hariç, ancak işleri başka bir şekilde karmaşıklaştırır). İşte girişimim:

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>

Bunun şu avantajları vardır (diğer çözümlere göre):

1. Bu mu sembolün genişliğinin dayanmayan sen örnekte gördüğümüz gibi. Geniş madde işaretleriyle bile çalıştığını göstermek için iki karakter kullandım. Bunu başka çözümlerde denerseniz, metnin hizasının bozulmasına neden olursunuz (aslında daha yüksek yakınlaştırmalarda * simgesiyle bile görülebilir).
2. Kurşunlar tarafından kullanılan alanın tam kontrolünü size verir . 30px'i herhangi bir şeyle değiştirebilirsiniz (1em vb.) Her üç yerde de değiştirmeyi unutmayın.
3. Size merminin konumlandırılmasının tam kontrolünü verir . text-align: center;İstediğiniz herhangi bir şeyle değiştirin . Örneğin deneyebilirsiniz color: red; text-align: right; padding-right: 5px; box-sizing: border-box; veya border-box ile oynamayı sevmiyorsanız, sadece padding'i (5px) genişlikten çıkarın (yani, bu örnekte width: 25px). Çok fazla seçenek var.
4. Şamandıralar kullanmaz, bu yüzden herhangi bir yerde tutulabilir.

Zevk almak.

bunu dene

    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>