Unicode-Zeichen als Aufzählungszeichen für Listen-Elemente in CSS

Question

Ich muss z. B. das Sternsymbol() als Aufzählungszeichen für einen Listeneintrag verwenden.

Ich habe die CSS3-Modul: Listen , in dem beschrieben wird, wie man benutzerdefinierten Text als Aufzählungszeichen verwenden kann, aber bei mir funktioniert es nicht. Ich denke, die Browser unterstützen einfach nicht die ::marker Pseudo-Element.

Wie kann ich das tun, ohne Bilder zu verwenden?

Answer 1

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

Ich habe ein Leerzeichen hinzugefügt, um eine kleine Lücke zwischen den li und der Stern. Der Code für den Weltraum lautet A0 .

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

Answer 2

Heute gibt es eine ::marker Option. also,

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

Answer 3

Ein ausführlicheres Beispiel für 222's Antwort :

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 hinzugefügt, um die Standard-Listenstile in älteren IE-Versionen wiederherzustellen. Sie könnten diese herausziehen und in ein bedingtes Include einbinden, falls gewünscht, oder durch eine auf Hintergrundbildern basierende Lösung ersetzen. Meiner bescheidenen Meinung nach sollten spezielle Aufzählungszeichenstile, die auf diese Weise implementiert werden, auf den wenigen Browsern, die keine Pseudoselektoren unterstützen, anständig dargestellt werden.

Getestet in Firefox, Chrome, Safari und IE8-10 und wird in allen korrekt dargestellt.

Answer 4

ul {
    list-style-type: none;    
}

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

Answer 5

Ich bin die gesamte Liste durchgegangen, und es gibt durchweg teilweise richtige und teilweise falsche Elemente, und das ab 2020.

Ich habe festgestellt, dass die Einrückung und der Versatz das größte Problem bei der Verwendung von UTF-8 war, daher stelle ich dies als 2020-kompatible CSS-Lösung mit dem Aufzählungszeichen "aufrechtes Dreieck" als Beispiel ein.

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. em als Einheit, um Konflikte mit der Schriftgröße zu vermeiden