web-dev-qa-db-fra.com

Comment utiliser un symbole de coche (✓) au lieu de puces dans une liste non ordonnée?

J'ai une liste où je veux ajouter un symbole de coche avant le texte de la liste. Existe-t-il des CSS qui peuvent m'aider à appliquer de cette façon?

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

Note: Je veux ceci dans ce type de code HTML

<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>
htmlcsshtml5special-characters
48
Stack-overflow-hero

Vous pouvez utiliser un pseudo-élément pour insérer ce caractère avant chaque élément de la liste:

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>
86
Josh Crozier

Voici trois styles de coche que vous pouvez utiliser:

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>

jsFiddle

Références:

28
Michael_B

En complément de la solution ul li:before { content: '✓'; }, vous pouvez utiliser n’importe quelle icône SVG comme contenu, telle que coche Font Aswesome .

ul {
  list-style: none;
}
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>

Pour résoudre le problème d'encapsulation que les autres réponses avaient, nous avons réservé 1,5 m em d'espace à gauche de chaque <li>, puis nous avons placé le fichier SVG au début de cet espace (position: absolute; left: 0).

Voici plus Icônes noires de Font Awesome .

CODEPEN <- essayez vous-même

6
Adam Orlov