Symbole de puce personnalisé pour les éléments <li> dans <ul> qui est un caractère normal et non une image

Je me rends compte que l'on peut spécifier un graphique personnalisé pour être un caractère de puce de remplacement, en utilisant l'attribut CSS:

list-style-image

Et puis en lui donnant une URL.

Cependant, dans mon cas, je veux juste utiliser le symbole «+». Je ne veux pas avoir à créer un graphique pour cela, puis à le pointer. Je préfère simplement demander à la liste non ordonnée d'utiliser un symbole plus comme symbole de puce.

Est-ce que cela peut être fait ou suis-je obligé d'en faire d'abord un graphique?

Ce qui suit est cité à partir de Taming Lists :

Il peut arriver que vous ayez une liste, mais que vous ne vouliez pas de puces, ou que vous souhaitiez utiliser un autre caractère à la place de la puce. Encore une fois, CSS fournit une solution simple. Ajoutez simplement le style de liste: aucun; à votre règle et forcez l'affichage des LI avec des retraits suspendus. La règle ressemblera à ceci:

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

Soit le remplissage ou la marge doit être défini sur zéro, l'autre défini sur 1em. Selon la «puce» que vous choisissez, vous devrez peut-être modifier cette valeur. Le retrait de texte négatif entraîne le déplacement de la première ligne vers la gauche de ce montant, créant un retrait suspendu.

Le HTML contiendra notre UL standard, mais avec le caractère ou l'entité HTML que vous souhaitez utiliser à la place de la puce précédant le contenu de l'élément de liste. Dans notre cas, nous utiliserons », la double citation à angle droit:».

»Item 1
» Item 2
»Item 3
» Item 4
»Item 5 nous allons faire
   un peu plus longtemps pour qu'il
   s'enroule

C'est une réponse tardive, mais je viens de tomber sur ceci ... Pour obtenir l'indentation correcte sur toutes les lignes qui s'enroulent, essayez-le de cette façon:

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

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

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

Tant de solutions.
Mais je pense toujours qu'il y a place à amélioration.

Avantages:

• code très compact
• fonctionne avec n'importe quelle taille de police
  (aucune valeur de pixel absolue contenue)
• aligne parfaitement les lignes
  (pas de léger décalage entre la première ligne et les lignes suivantes)

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>

C'est la solution W3C. Fonctionne dans Firefox et 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>

Voici la meilleure solution que j'ai trouvée jusqu'à présent. Cela fonctionne très bien et c'est multi-navigateur (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;
}

L'important est d'avoir le caractère dans un bloc flottant avec une largeur fixe afin que le texte reste aligné s'il est trop long pour tenir sur une seule ligne. 1.2em est la largeur que vous voulez pour votre personnage, changez-la selon vos besoins.

Vous pouvez utiliser le :beforepseudo-sélecteur pour insérer du contenu devant l'élément de liste. Vous pouvez trouver un exemple sur Quirksmode, sur http://www.quirksmode.org/css/beforfter.html . J'utilise ceci pour insérer des citations géantes autour des blockquotes ...

HTH.

Ma solution utilise le positionnement pour que les lignes enveloppées s'alignent automatiquement correctement. Vous n'avez donc pas à vous soucier de définir padding-right sur le li: before.

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>

Il est conseillé de qualifier le style du <li>afin qu'il n'affecte pas les <ol>éléments de la liste. Alors:

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 fournit une excellente solution prête à l'emploi:

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

Style de tiret Em:

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

Je préfère utiliser une marge négative, vous donne plus de contrôle

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

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

Il est intéressant de noter qu'aucune des solutions publiées n'est assez bonne, car elles reposent sur le fait que le caractère utilisé mesure 1em de large, ce qui n'a pas besoin de l'être (à l'exception peut-être de la réponse de John Magnolia qui utilise cependant des flotteurs qui peuvent compliquer les choses d'une autre manière). Voici ma tentative:

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>

Cela présente ces avantages (par rapport aux autres solutions):

1. Il ne dépend pas de la largeur du symbole comme vous le voyez dans l'exemple. J'ai utilisé deux caractères pour montrer que cela fonctionne même avec des balles larges. Si vous essayez cela dans d'autres solutions, vous obtenez le texte mal aligné (en fait, il est même visible avec le symbole * dans les zooms plus élevés).
2. Il vous donne un contrôle total de l'espace utilisé par les balles . Vous pouvez remplacer 30px par n'importe quoi (même 1em, etc.). N'oubliez pas de le changer aux trois endroits.
3. Si vous donne un contrôle total du positionnement de la balle . Remplacez simplement le text-align: center;par quelque chose à votre goût. Par exemple, vous pouvez essayer color: red; text-align: right; padding-right: 5px; box-sizing: border-box; ou si vous n'aimez pas jouer avec border-box, soustrayez simplement le padding (5px) de width (c'est-à-dire width: 25px dans cet exemple). Il existe de nombreuses options.
4. Il n'utilise pas de flotteurs et peut donc être contenu n'importe où.

Prendre plaisir.

essaye ça

    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>