Wie verwende ich ein Häkchen (✓) anstelle von Aufzählungszeichen in einer ungeordneten Liste?

82

Ich habe eine Liste, in der ich vor dem Listentext ein Häkchensymbol hinzufügen möchte. Gibt es CSS, das mir helfen kann, mich auf diese Weise zu bewerben?

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

Hinweis: Ich möchte dies in dieser Art von HTML-Code

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
Erweitern Sie das Snippet

css html special-characters Stapel-Überlauf-Held
quelle

Antworten:

144

Sie können ein Pseudoelement verwenden , um dieses Zeichen vor jedem Listenelement einzufügen:

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
Erweitern Sie das Snippet

Josh Crozier
quelle
Ich habe dies verwendet und es funktioniert in Chrome 65. Ich konnte jedes <li> normalerweise mit einem 1px-Rahmen umbrechen, links und rechts auf der ul li schweben: vorher - Sie können die Rahmenfarbe auf den Hintergrund Ihres Elements setzen.
Weihnachten
Danke für die Lösung! Ich habe einen Hinweis hinzugefügt, dass beim Einpacken Einrückungen verloren gehen. (Entschuldigung für die Bearbeitung des Beitrags, aber es war besser, das Problem zu veranschaulichen, als nur einen Kommentar zu hinterlassen, und hoffentlich können wir einen Weg finden, damit umzugehen.)
Dan Dascalescu
@ Josh: Adams Antwort hat eine Lösung für das Verpackungsproblem. Ich habe es aus Gründen der Klarheit bearbeitet, bis Sie es einschließen.
Dan Dascalescu
32

Hier sind drei verschiedene Häkchenstile, die Sie verwenden können:

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul><!-- not working on Stack snippet; check fiddle demo -->
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
Erweitern Sie das Snippet

jsFiddle

Verweise:

Michael Benjamin
quelle
Dies unterscheidet sich nicht von Josh Croziers Antwort und leidet unter dem gleichen Problem , die Einkerbung beim Einwickeln zu zerstören . Auch der letzte Charakter taucht auch auf Chromium / Ubuntu nicht in der Geige auf, aber das ist sowieso nicht der Punkt - Joshs Antwort ist der Kern der Lösung. Welche Häkchenzeichen verwendet werden sollen, ist eine Designauswahl.
Dan Dascalescu
1
@DanDascalescu, diese Antwort erweitert die Lösung von Josh Crozier, indem sie Häkchenoptionen bereitstellt, von denen einige Leute möglicherweise nichts wissen. Das sind wertvolle Informationen. Die Tatsache, dass es sich um "Designentscheidungen" handelt, macht diese Antwort nicht weniger nützlich. Ihre Ablehnung ist meiner Ansicht nach nicht gerechtfertigt, da: (1) die Antwort für viele Menschen nützlich war (und fast 30 positive Stimmen hat), (2) die Antwort nichts anderes als Stilentscheidungen vorgibt und (3) ich Ich habe nicht versucht, andere Probleme anzugehen (die, wie Sie sagen, "sowieso außer Frage" sind)
Michael Benjamin
1
Die angezeigten Häkchen "\ 2713" und "\ 2714" sind rohe Unicode-Codepunkte. Ich kann nicht sehen, wie sie aussehen. Wenn die Antwort eine Stilauswahl geben soll, kann sie einige tatsächliche Häkchen enthalten: ✓, ✔, ☑, ✅. Welches Häkchen zu verwenden ist, ist kein interessantes Problem. Wie man Häkchen benutzt ist. Ich sehe es als "Wie male ich ein Boot, das sich gerade im Wasser befindet" im Vergleich zu "Welche Blautöne kann ich malen?". Ist das sinnvoll?
Dan Dascalescu
Sie haben das Recht, diese Antwort aus jeder gewünschten Perspektive anzuzeigen. Ich werde nicht mit Ihrer Meinung streiten. Tatsache ist jedoch, dass die überwiegende Mehrheit der Besucher dieses Beitrags diese Antwort nützlich findet. Ich lasse es einfach dabei. Danke für die Rückmeldung. @ DanDascalescu
Michael Benjamin
2
Die Leute stimmen aus vielen verschiedenen Gründen ab. Die Leute stimmen aus anderen Gründen als Ihren. Sie sind mit dem Inhalt dieser Antwort nicht einverstanden. Sie sagen nicht, dass die Antwort falsch oder veraltet ist (wie in den Links, auf die Sie verwiesen haben), Sie mögen es einfach nicht. Das ist ok für mich. Sie haben ein Recht auf Ihre Meinung.
Michael Benjamin
22

Als Ergänzung zur Lösung:

ul li:before {
 content: '✓'; 
}

Sie können ein beliebiges SVG-Symbol als Inhalt verwenden , z. B. " Font Aswesome" .

Geben Sie hier die Bildbeschreibung ein

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>
Erweitern Sie das Snippet

Hinweis: Um das Verpackungsproblem zu lösen, das andere Antworten hatten:

  • Wir reservieren jeweils 1,5 m Platz auf der linken Seite <li>
  • Positionieren Sie dann die SVG am Anfang dieses Feldes ( position: absolute; left: 0)

Hier sind weitere Font Awesome schwarze Symbole .

Überprüfen Sie diesen CODEPEN, um zu sehen, wie Sie Farben hinzufügen und ihre Größe ändern können.

Adam Orlov
quelle
6 
<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

Sie können diesen einfachen CSS-Stil verwenden

ul {
     list-style-type: '\2713';
   }
Hitendra Singh Shekhawat
quelle
Adams Antwort berührte das Verpackungsproblem, aber es brauchte jede Menge zusätzlichen Code ... das funktioniert einfach. Der Abstand war für mich eine Berührung, daher habe ich am Ende ein zusätzliches \ 1 \ 1 hinzugefügt, um das Häkchen vom <li> weg zu platzieren.
Jaden Baptista