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

Text als Aufzählungszeichen verwenden

Verwenden Sie li:before mit einem escapeten Hex-HTML-Element (oder einem beliebigen einfachen Text).

---

Beispiel

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

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

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

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

---

Browser-Kompatibilität

Ich habe es nicht selbst getestet, aber es sollte ab IE8 unterstützt werden. Zumindest ist das, was quirksmode & css-tricks sagen.

Sie können bedingte Kommentare verwenden, um ältere/langsamere Lösungen wie Bilder oder Skripte anzuwenden. Besser noch, verwenden Sie beides 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-size ist eigentlich erst ab dem IE9.
2. HTML-Textfarben und spezielle ( verrückt ) können Schriftarten mit weniger HTTP-Anfragen eine Menge erreichen.
3. Eine Skriptlösung kann einfach das HTML-Element einfügen und das gleiche CSS die Arbeit erledigen lassen.
4. Ein guter rücksetzender CSS-Code könnte die list-style (die logischere Wahl) einfacher.

---

Viel Spaß!

Answer 2

EDIT

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

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

ALTE ANTWORT

Ich würde mich wahrscheinlich für einen Bildhintergrund entscheiden, die sind viel mehr effizient vielseitig und browserübergreifend einsetzbar.

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>

Answer 3

Dies ist die Lösung des W3C. Sie können sie im Jahr 3012 verwenden!

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

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

Update: Laut den Kommentaren funktioniert dies in allen modernen Browsern im Jahr 2021.

Answer 4

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

<ul id="modal-select-your-position">
  <li>First item</li>
  <li>Second item</li>
</ul>

Answer 5

Bilder werden nicht empfohlen, da sie auf manchen Geräten (Apple-Geräte mit Retina-Display) oder beim Zoomen pixelig erscheinen können. Mit einem Zeichen sieht Ihre Liste immer fantastisch aus.

Hier ist die beste Lösung, die ich bis jetzt gefunden habe. Sie 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;
}

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Wichtig ist, dass das Zeichen in einem fließenden Block mit fester Breite steht, damit der Text ausgerichtet bleibt, wenn er zu lang ist, um in eine einzige Zeile zu passen. 1.2em die Breite ist, die Sie für Ihr Zeichen wünschen, ändern Sie sie nach Ihren Bedürfnissen. Vergessen Sie nicht, padding und margin für ul- und li-Elemente zurückzusetzen.

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