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

Question

Je sais que l'on peut spécifier un graphique personnalisé pour remplacer le caractère de la balle, en utilisant un attribut CSS :

list-style-image

Et ensuite lui donner une URL.

Toutefois, dans mon cas, je veux simplement 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 le symbole "+" comme symbole de puce.

Est-ce possible ou dois-je d'abord en faire un graphique ?

Answer 1

C'est une réponse tardive, mais je viens de tomber sur ceci... Pour que l'indentation soit correcte sur toutes les lignes qui se chevauchent, essayez de la manière suivante :

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

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

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

Answer 2

Le texte suivant est tiré de Listes d'apprivoisement :

Il peut arriver que vous ayez une liste, mais que vous ne vouliez pas de puces, ou que vous vouliez utiliser un autre caractère à la place de la puce. Là encore, les CSS offrent une solution simple. Il suffit d'ajouter list-style : none ; à votre règle et de forcer les LI à s'afficher avec des retraits suspendus. La règle ressemblera à quelque chose comme ceci :

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

Le padding ou la marge doivent être définis à zéro, l'autre étant défini à 1em. En fonction de la "balle" que vous choisissez, vous devrez peut-être modifier cette valeur. L'indentation négative du texte fait que la première ligne est déplacée vers la gauche de cette valeur, créant ainsi 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 ", le guillemet double droit : ".

"Point 1
"Point 2
"Point 3
"Point 4
"Point 5, nous ferons
   un peu plus longtemps pour que
   il enveloppera

Answer 3

C'est la solution du W3C. Fonctionne dans Firefox, Chrome et Edge.

ul { list-style-type: "

Answer 4

Voici la meilleure solution que j'ai trouvée jusqu'à présent. Elle fonctionne parfaitement et est compatible avec tous les navigateurs (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 de placer le caractère dans un bloc flottant de 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 souhaitez pour votre personnage, modifiez-la en fonction de vos besoins.

Answer 5

Vous pouvez utiliser le :before pseudo-sélecteur pour insérer du contenu devant l'élément de la liste. Vous pouvez trouver un exemple sur Quirksmode, à l'adresse suivante http://www.quirksmode.org/css/beforeafter.html . Je l'utilise pour insérer des guillemets géants autour des guillemets droits...

HTH.