Je dois utiliser, par exemple, le symbole étoile (★) comme puce pour un élément de liste.

J'ai lu le module CSS3: Lists , qui décrit, comment utiliser du texte personnalisé comme puces, mais cela ne fonctionne pas pour moi. Je pense que les navigateurs ne prennent tout simplement pas en charge le ::markerpseudo élément.

Comment puis-je le faire, sans utiliser d'images?

ÉDITER

Je ne recommanderais probablement plus d'utiliser des images. Je m'en tiendrai à l'approche consistant à utiliser un caractère Unicode, comme ceci:

li:before {
  content: "\2605";
}

ANCIENNE RÉPONSE

Je choisirais probablement un arrière-plan d'image, ils sont beaucoup plus efficaces, polyvalents et compatibles avec tous les navigateurs.

Voici un exemple:

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

Utilisation du texte sous forme de puces

À utiliser li:beforeavec une entité HTML hexadécimale échappée (ou tout autre texte brut).

Exemple

Mon exemple produira des listes avec des coches sous forme de puces.

CSS :

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

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

Compatibilité du navigateur

Je n'ai pas testé moi-même, mais il devrait être pris en charge à partir d'IE8. Au moins, c'est ce que disent quirksmode et css-tricks .

Vous pouvez utiliser des commentaires conditionnels pour appliquer des solutions plus anciennes / plus lentes telles que des images ou des scripts. Mieux encore, utilisez les deux avec <noscript>pour les images.

HTML :

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

À propos des images d'arrière-plan

Les images d'arrière-plan sont en effet faciles à manipuler, mais ...

1. La prise en charge du navigateur background-sizen'est en fait qu'à partir d'IE9.
2. Les couleurs de texte HTML et les polices spéciales ( folles ) peuvent faire beaucoup, avec moins de requêtes HTTP.
3. Une solution de script peut simplement injecter l'entité HTML et laisser le même CSS faire le travail.
4. Un bon code CSS de réinitialisation pourrait faciliter list-style(le choix le plus logique).

Prendre plaisir.

Vous pouvez le construire:

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

C'est la solution W3C. Vous pouvez l'utiliser en 3012!

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

https://drafts.csswg.org/css-lists/#text-markers

Les images ne sont pas recommandées car elles peuvent apparaître pixélisées sur certains appareils (appareils Apple avec écran Retina) ou lorsqu'elles sont agrandies. Avec un personnage, votre liste est toujours superbe.

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;
    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 souhaitez pour votre personnage, changez-la selon vos besoins. N'oubliez pas de réinitialiser le remplissage et la marge pour les éléments ul et li.

EDIT: sachez que la taille "1.2em" peut varier si vous utilisez une police différente dans ul et li: before. Il est plus sûr d'utiliser des pixels.

Pour ajouter une étoile, utilisez le caractère Unicode 22C6.

J'ai ajouté un espace pour faire un petit écart entre la liet l'étoile. Le code de l'espace est A0.

li:before {
    content: '\22C6\A0';
}

Un exemple plus complet de la réponse de 222 :

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

J'ai inclus des propriétés star-hack pour restaurer les styles de liste par défaut dans les anciennes versions d'IE. Vous pouvez les extraire et les inclure dans une inclusion conditionnelle si vous le souhaitez, ou les remplacer par une solution basée sur une image d'arrière-plan. Mon humble avis est que les styles de puces spéciaux implémentés de cette manière devraient se dégrader gracieusement sur les quelques navigateurs qui ne prennent pas en charge les pseudosélecteurs.

Testé dans Firefox, Chrome, Safari et IE8-10 et rend correctement dans tous.

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

J'ai parcouru toute cette liste et il y a des éléments partiellement corrects et partiellement incorrects, à partir de 2020.

J'ai trouvé que le retrait et le décalage étaient le plus gros problème lors de l'utilisation de UTF-8, donc je publie ceci comme une solution CSS compatible 2020 en utilisant la puce "triangle vertical" comme exemple.

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

utiliser emcomme unité pour éviter les conflits avec la taille de la police

Essayez ce code ...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

Ce sujet est peut-être ancien, mais voici une solution rapide ul {list-style:outside none square;}ou ul {list-style:outside none disc;}, etc ...

puis ajoutez un remplissage à gauche à l'élément de liste

ul li{line-height: 1.4;padding-bottom: 6px;}