wake-up-neo.net

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

Ich weiß, man kann eine benutzerdefinierte Grafik mit einem CSS-Attribut als Ersatz-Aufzählungszeichen angeben:

list-style-image

Und dann eine URL angeben.

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

Kann man das machen oder muss ich es erst grafisch machen?

98
idStar

Folgendes wird aus Taming Lists zitiert:

Es kann vorkommen, dass Sie eine Liste haben, aber keine Aufzählungszeichen haben möchten oder anstelle des Aufzählungszeichens einen anderen Charakter verwenden möchten. Auch hier bietet CSS eine unkomplizierte Lösung. Fügen Sie einfach list-style hinzu: none; 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 gewählten "Aufzählungszeichen" müssen Sie diesen Wert möglicherweise ändern. Durch den negativen Texteinzug wird die erste Zeile um diesen Betrag nach links verschoben, wodurch ein hängender Einzug entsteht.

Der HTML-Code enthält unser Standard-UL, jedoch mit dem Zeichen oder der HTML-Entität, die Sie anstelle des Aufzählungszeichens verwenden möchten, das dem Inhalt des Listenelements vorangestellt ist. In unserem Fall verwenden wir », das richtige doppelte Anführungszeichen:».

" Gegenstand 1
»Punkt 2
»Punkt 3
»Punkt 4
»Punkt 5 machen wir
ein bisschen länger damit
es wird wickeln

Dies ist eine späte Antwort, aber ich bin gerade auf diese Frage gestoßen.

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

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

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

So viele Lösungen.
Aber ich denke immer noch, dass es Verbesserungsbedarf gibt.

Vorteile:

  • sehr kompakter Code
  • funktioniert mit jeder Schriftgröße 
    (keine absoluten Pixelwerte enthalten)
  • zeilen perfekt ausrichten 
    (keine leichte Verschiebung zwischen erster und nachfolgender 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>

24
Jpsy

Dies ist die W3C-Lösung. Im Moment funktioniert das zumindest in Firefox. 

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

http://dev.w3.org/csswg/css-lists/#marker-content

22
PHPst

Hier ist die beste Lösung, die ich bisher gefunden habe. Es funktioniert großartig 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 das Zeichen in einem frei beweglichen Block mit fester Breite steht, 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 wollen, ändern Sie sie für Ihre Bedürfnisse.

18
NicolasBernier

Sie können den Pseudo-Selector :before verwenden, um Inhalte vor dem Listenelement einzufügen. Ein Beispiel finden Sie unter Quirksmode unter http://www.quirksmode.org/css/beforeafter.html . Ich benutze dies, um riesige Anführungszeichen um Blockanweisungen einzufügen ...

HTH.

10
Tieson T.

Bei meiner Lösung wird die Positionierung verwendet, um umlaufende Linien automatisch richtig auszurichten. Sie müssen sich also keine Gedanken darüber machen, ob Sie das padding-right direkt auf dem li: setzen.

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>

9
user648519

Es ist ratsam, das Styling der <li> zu qualifizieren, damit <ol>-Listenelemente nicht betroffen sind. 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;
}
7
silverliebt

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>

7
sdw

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}
<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

4
bob

Interessanterweise denke ich nicht, dass eine der veröffentlichten Lösungen gut genug ist, weil sie darauf angewiesen sind, dass der verwendete Charakter 1em breit ist, was nicht unbedingt der Fall sein muss (mit Ausnahme der Antwort von John Magnolia, die jedoch Floats verwendet, die dies tun können.) komplizieren die Dinge auf andere Weise). 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 ist nicht auf die Breite des Symbols angewiesen, 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 (er ist sogar mit dem * -Symbol in höheren Zooms sichtbar).
  2. Es gibt Ihnen insgesamt Kontrolle des von Aufzählungszeichen verwendeten Platzes. Sie können 30px durch irgendetwas ersetzen (sogar 1em usw.). Vergessen Sie nicht, es an allen drei Stellen zu ändern. 
  3. Wenn gibt Ihnen insgesamt Kontrolle der Positionierung des Aufzählungszeichens. Ersetzen Sie einfach den text-align: center; durch alles, was Ihnen gefällt. Zum Beispiel können Sie color: red; text-align: right; padding-right: 5px; box-sizing: border-box; Versuchen. Wenn Sie nicht gerne mit border-box spielen, ziehen Sie einfach die Auffüllung (5px) von der Breite ab (d. H. Breite: 25px in diesem Beispiel). Es gibt viele Möglichkeiten.
  4. Es verwendet keine Schwimmer, so dass es überall enthalten sein kann.

Genießen.

1
gorn

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

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

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

Em Strich-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*/
}
0