Benutzerdefiniertes Aufzählungszeichen für <li> Elemente in <ul>, das ein reguläres Zeichen und kein Bild ist

Mir ist klar, dass man eine benutzerdefinierte Grafik als Ersatz-Aufzählungszeichen mithilfe des CSS-Attributs angeben kann:

list-style-image

Und dann eine URL geben.

In meinem Fall möchte ich jedoch nur das Symbol '+' verwenden. Ich möchte dafür keine Grafik erstellen und dann darauf zeigen müssen. Ich möchte die ungeordnete Liste lieber anweisen, ein Pluszeichen als Aufzählungszeichen zu verwenden.

Kann das gemacht werden oder bin ich gezwungen, zuerst eine Grafik daraus zu machen?

Folgendes wird aus den Zähmungslisten zitiert :

Es kann vorkommen, dass Sie eine Liste haben, aber keine Aufzählungszeichen möchten oder ein anderes Zeichen anstelle des Aufzählungszeichens verwenden möchten. Auch hier bietet CSS eine einfache Lösung. Fügen Sie einfach den Listenstil hinzu: keine; zu Ihrer Regel und zwingen Sie die LIs, mit hängenden Einrückungen anzuzeigen. Die Regel sieht ungefähr so ​​aus:

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

Entweder der Abstand oder der Rand müssen auf Null gesetzt werden, der andere auf 1em. Abhängig von dem von Ihnen ausgewählten „Aufzählungszeichen“ müssen Sie diesen Wert möglicherweise ändern. Der negative Texteinzug bewirkt, dass die erste Zeile um diesen Betrag nach links verschoben wird, wodurch ein hängender Einzug entsteht.

Der HTML-Code enthält unser Standard-UL, jedoch mit jedem Zeichen oder jeder HTML-Entität, die Sie anstelle des Aufzählungszeichens vor dem Inhalt des Listenelements verwenden möchten. In unserem Fall verwenden wir », das rechte Doppelwinkel-Zitat:».

»Punkt 1
» Punkt 2
»Punkt 3
» Punkt 4
»Punkt 5 werden wir
   etwas länger machen, damit
   es sich einwickelt

Dies ist eine späte Antwort, aber ich bin gerade darauf gestoßen ... Um die Einrückung in Zeilen, die umbrochen werden, korrekt zu machen, versuchen Sie es folgendermaßen:

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

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

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

So viele Lösungen.
Aber ich denke immer noch, dass es Raum für Verbesserungen gibt.

Vorteile:

• sehr kompakter Code
• funktioniert mit jeder Schriftgröße
  (keine absoluten Pixelwerte enthalten)
• richtet Zeilen perfekt aus
  (keine leichte Verschiebung zwischen der ersten und der folgenden Zeile)

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>

Dies ist die W3C-Lösung. Funktioniert in Firefox und Chrome.

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>

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

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.

Mit dem :beforePseudo-Selektor können Sie Inhalte vor dem Listenelement einfügen. Ein Beispiel für Quirksmode finden Sie unter http://www.quirksmode.org/css/beforfore.html . Ich benutze dies, um riesige Anführungszeichen um Blockzitate einzufügen ...

HTH.

Meine Lösung verwendet die Positionierung, um umbrochene Linien automatisch korrekt auszurichten. Sie müssen sich also keine Gedanken darüber machen, wie Sie die Polsterung direkt auf dem li: before einstellen.

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>

Es ist ratsam, das Styling des zu qualifizieren, <li>damit es keine Auswirkungen auf <ol>Listenelemente hat. So:

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

Font-awesome bietet eine großartige Lösung:

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

Em Dash-Stil:

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

Ich bevorzuge die Verwendung einer negativen Marge, gibt Ihnen mehr Kontrolle

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

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

Interessanterweise glaube ich nicht, dass eine der veröffentlichten Lösungen gut genug ist, da sie auf der Tatsache beruhen, dass das verwendete Zeichen 1em breit ist, was nicht unbedingt erforderlich ist (mit Ausnahme von John Magnolias Antwort, die jedoch Floats verwendet, die dies können Dinge auf andere Weise komplizieren). Hier ist mein Versuch:

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>

Dies hat folgende Vorteile (gegenüber anderen Lösungen):

1. Es hängt nicht von der Breite des Symbols ab, wie Sie im Beispiel sehen. Ich habe zwei Zeichen verwendet, um zu zeigen, dass es auch mit breiten Kugeln funktioniert. Wenn Sie dies in anderen Lösungen versuchen, wird der Text falsch ausgerichtet (in höheren Zooms ist er sogar mit dem Symbol * sichtbar).
2. Sie haben die vollständige Kontrolle über den von Aufzählungszeichen genutzten Platz . Sie können 30px durch alles ersetzen (sogar 1em usw.). Vergessen Sie nur nicht, es an allen drei Stellen zu ändern.
3. Wenn Sie die vollständige Kontrolle über die Positionierung des Geschosses haben . Ersetzen Sie das einfach text-align: center;durch etwas nach Ihren Wünschen. Zum Beispiel können Sie es versuchen color: red; text-align: right; padding-right: 5px; box-sizing: border-box; oder wenn Sie nicht gerne mit dem Rahmen spielen, subtrahieren Sie einfach die Polsterung (5 Pixel) von der Breite (dh Breite: 25 Pixel in diesem Beispiel). Es gibt viele Möglichkeiten.
4. Es werden keine Schwimmer verwendet, sodass es überall enthalten sein kann.

Genießen.

Versuche dies

    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>