Örneğin, bir liste öğesi için madde işareti olarak yıldız sembolünü (★) kullanmam gerekiyor.

CSS3 modülünü okudum : Özel metnin madde işareti olarak nasıl kullanılacağını açıklayan listeler , ancak benim için çalışmıyor. Tarayıcıların ::markersözde öğeyi desteklemediğini düşünüyorum .

Resim kullanmadan bunu nasıl yapabilirim?

DÜZENLE

Muhtemelen artık resimleri kullanmanızı tavsiye etmem. Bir Unicode karakteri kullanma yaklaşımına sadık kalacağım, şöyle:

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

ESKİ CEVAP

Muhtemelen bir resim arka planı tercih ederim, çok daha verimli, çok yönlü ve çapraz tarayıcı dostu.

İşte bir örnek:

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

Metni Madde İşaretleri Olarak Kullanma

Çıkış karakterli li:beforebir Hex HTML Varlığı (veya herhangi bir düz metin) ile kullanın.

Misal

Örneğim, madde işaretleri olarak onay işaretli listeler üretecek.

CSS :

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

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

Tarayıcı Uyumluluğu

Kendimi test etmedim, ancak IE8 itibariyle desteklenmelidir. En azından tuhaf mod ve css hilelerinin söylediği budur.

Görüntüler veya komut dosyaları gibi daha eski / yavaş çözümleri uygulamak için koşullu yorumları kullanabilirsiniz. Daha da iyisi, görüntüler için her ikisini de kullanın <noscript>.

HTML :

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

Arka plan resimleri hakkında

Arka plan resimlerinin kullanımı gerçekten kolaydır, ancak ...

1. İçin tarayıcı desteği background-sizeaslında yalnızca IE9'dan itibaren verilmektedir.
2. HTML metin renkleri ve özel ( çılgın ) yazı tipleri daha az HTTP isteği ile çok şey yapabilir.
3. Bir komut dosyası çözümü yalnızca HTML Varlığını enjekte edebilir ve aynı CSS'nin işi yapmasına izin verebilir.
4. İyi bir CSS kodunu sıfırlamak list-style(daha mantıklı seçim) daha kolay hale getirebilir .

Zevk almak.

Yapabilirsin:

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

güncelleme: yorumlarda, Goerge "Bu Chrome, Firefox ve Edge'de çalışır, Safari'de çalışmaz" diyor.

Bu W3C çözümüdür. 3012'de kullanabilirsiniz!

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

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

Bazı cihazlarda (Retina ekranlı Apple cihazları) veya yakınlaştırıldığında pikselli görünebileceğinden, resimler tavsiye edilmez. Bir karakterle listeniz her seferinde harika görünür.

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

Önemli olan, karakterin sabit genişlikte bir kayan 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. Ul ve li öğeleri için doldurma ve kenar boşluğunu sıfırlamayı unutmayın.

DÜZENLEME: ul ve li: öncesinde farklı bir yazı tipi kullanırsanız "1.2em" boyutunun değişebileceğini unutmayın. Piksel kullanmak daha güvenlidir.

Yıldız eklemek için Unicode karakterini kullanın 22C6.

liYıldız ile arasında küçük bir boşluk bırakmak için bir boşluk ekledim . Alan kodu A0.

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

222'nin cevabının daha eksiksiz bir örneği :

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

Eski IE sürümlerinde varsayılan liste stillerini geri yüklemek için star-hack özelliklerini ekledim. Bunları çıkarabilir ve istenirse koşullu dahil etmeye dahil edebilir veya arka plan görüntüsü tabanlı bir çözümle değiştirebilirsiniz. Benim mütevazi görüşüm, bu şekilde uygulanan özel madde işareti stillerinin, sahte seçicileri desteklemeyen birkaç tarayıcıda zarif bir şekilde bozulması gerektiğidir.

Firefox, Chrome, Safari ve IE8-10'da test edilmiştir ve hepsinde doğru şekilde oluşturulur.

ul {
    list-style-type: none;    
}

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

Tüm bu listeyi inceledim ve 2020 itibariyle kısmen doğru ve kısmen yanlış unsurlar var.

Girinti ve uzaklığın UTF-8'i kullanırken en büyük sorun olduğunu buldum, bu yüzden bunu örneğim olarak "dik üçgen" madde işaretini kullanarak 2020 uyumlu bir CSS çözümü olarak gönderiyorum.

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
}

emyazı tipi boyutlandırma ile çakışmayı önlemek için birim olarak kullanın

Bu kodu deneyin ...

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

Bu konu eski olabilir, ancak işte hızlı bir düzeltme ul {list-style:outside none square;}veya ul {list-style:outside none disc;}vb ...

sonra liste öğesine sol dolgu ekleyin

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