Ich muss zum Beispiel das Sternsymbol (★) als Aufzählungszeichen für ein Listenelement verwenden.

Ich habe das CSS3-Modul gelesen : Listen , in denen beschrieben wird, wie benutzerdefinierter Text als Aufzählungszeichen verwendet wird, aber es funktioniert bei mir nicht. Ich denke, die Browser unterstützen das Pseudoelement einfach nicht ::marker.

Wie kann ich das machen, ohne Bilder zu verwenden?

BEARBEITEN

Ich würde wahrscheinlich nicht mehr empfehlen, Bilder zu verwenden. Ich würde mich an den Ansatz halten, ein Unicode-Zeichen wie folgt zu verwenden:

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

ALTE ANTWORT

Ich würde mich wahrscheinlich für einen Bildhintergrund entscheiden, sie sind viel effizienter, vielseitiger und browserübergreifender.

Hier ist ein Beispiel:

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

Verwenden von Text als Aufzählungszeichen

Verwendung li:beforemit einer maskierten Hex-HTML-Entität (oder einem beliebigen einfachen Text).

Beispiel

In meinem Beispiel werden Listen mit Häkchen als Aufzählungszeichen erstellt.

CSS :

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

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

Browser-Kompatibilität

Ich habe mich nicht getestet, aber es sollte ab IE8 unterstützt werden. Zumindest sagen das Quirksmode & CSS-Tricks .

Sie können bedingte Kommentare verwenden, um ältere / langsamere Lösungen wie Bilder oder Skripte anzuwenden. Besser noch, verwenden Sie beide mit <noscript>für die Bilder.

HTML :

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

Über Hintergrundbilder

Hintergrundbilder sind zwar einfach zu handhaben, aber ...

1. Browser-Unterstützung für background-sizeist eigentlich nur ab IE9.
2. HTML-Textfarben und spezielle ( verrückte ) Schriftarten können mit weniger HTTP-Anforderungen viel bewirken.
3. Eine Skriptlösung kann einfach die HTML-Entität einfügen und dasselbe CSS die Arbeit erledigen lassen.
4. Ein gutes Zurücksetzen des CSS-Codes könnte list-style(die logischere Wahl) erleichtern.

Genießen.

Sie können es konstruieren:

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

Dies ist die W3C-Lösung. Sie können es in 3012 verwenden!

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

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

Bilder werden nicht empfohlen, da sie auf einigen Geräten (Apple-Geräte mit Retina-Display) oder beim Vergrößern pixelig erscheinen können. Mit einem Zeichen sieht Ihre Liste jedes Mal fantastisch aus.

Hier ist die beste Lösung, die ich bisher gefunden habe. Es funktioniert hervorragend und ist browserübergreifend (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;
}

Wichtig ist, dass sich das Zeichen in einem schwebenden Block mit einer festen Breite befindet, damit der Text ausgerichtet bleibt, wenn er zu lang ist, um in eine einzelne Zeile zu passen. 1.2em ist die Breite, die Sie für Ihren Charakter wünschen, ändern Sie sie für Ihre Bedürfnisse. Vergessen Sie nicht, die Polsterung und den Rand für ul- und li-Elemente zurückzusetzen.

BEARBEITEN: Beachten Sie, dass die Größe von "1.2em" variieren kann, wenn Sie zuvor eine andere Schriftart in ul und li: verwenden. Es ist sicherer, Pixel zu verwenden.

Um einen Stern hinzuzufügen, verwenden Sie das Unicode-Zeichen 22C6.

Ich habe ein Leerzeichen hinzugefügt, um eine kleine Lücke zwischen dem liund dem Stern zu machen. Der Code für Leerzeichen lautet A0.

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

Ein vollständigeres Beispiel für die Antwort von 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;
}

Ich habe Star-Hack-Eigenschaften eingefügt, um die Standardlistenstile in älteren IE-Versionen wiederherzustellen. Sie können diese herausziehen und bei Bedarf in ein bedingtes Include aufnehmen oder durch eine auf Hintergrundbildern basierende Lösung ersetzen. Meine bescheidene Meinung ist, dass spezielle Aufzählungsstile, die auf diese Weise implementiert wurden, sich in den wenigen Browsern, die keine Pseudoselektoren unterstützen, elegant verschlechtern sollten.

In Firefox, Chrome, Safari und IE8-10 getestet und insgesamt korrekt gerendert.

ul {
    list-style-type: none;    
}

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

Ich habe diese ganze Liste durchgesehen und ab 2020 gibt es teilweise korrekte und teilweise falsche Elemente.

Ich habe festgestellt, dass der Einzug und der Versatz das größte Problem bei der Verwendung von UTF-8 sind. Daher veröffentliche ich dies als 2020-kompatible CSS-Lösung am Beispiel des Aufzählungszeichens "aufrechtes Dreieck".

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
}

Verwenden Sie diese emOption als Einheit, um Konflikte mit der Schriftgröße zu vermeiden

Versuchen Sie diesen Code ...

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

Dieses Thema mag alt sein, aber hier ist eine schnelle Lösung ul {list-style:outside none square;}oder ul {list-style:outside none disc;}, etc ...

Fügen Sie dann das linke Element zum Listenelement hinzu

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