web-dev-qa-db-fra.com

Caractère Unicode en tant que puce pour l'élément de liste en CSS

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

J'ai lu le module CSS3: Listes , qui décrit l'utilisation du texte personnalisé en tant que puces, mais cela ne fonctionne pas pour moi. Je pense que les navigateurs ne supportent tout simplement pas le ::marker pseudo élément.

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

htmlcsshtml-lists
102
AntonAL

EDIT

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

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

ANCIENNE RÉPONSE

J'irais probablement pour un fond d'image, ils sont beaucoup plus efficace polyvalent et compatible avec plusieurs 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>
69
agbb

Utiliser le texte comme une balle

Utilisation li:before avec une entité HTML hexadécimale échappée (ou tout texte brut).

Exemple

Mon exemple produira des listes avec des coches en tant que 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 de IE8. Du moins c'est ce que quirksmode & 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 de fond sont en effet faciles à manipuler, mais ...

  1. Prise en charge du navigateur pour background-size est en réalité uniquement à partir de IE9.
  2. Les couleurs de texte HTML et les polices spéciales ( crazy) 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. Une bonne réinitialisation du code CSS pourrait rendre list-style (le choix le plus logique) plus facile.

Prendre plaisir.

102
222

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;
}
34
defann

C'est la solution du 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

17
PHPst

Les images ne sont pas recommandées car elles peuvent apparaître pixellisées sur certains appareils (appareils Apple avec affichage Retina) ou lors d'un zoom avant. Avec un personnage, votre liste est toujours impressionnante.

Voici la meilleure solution que j'ai trouvée jusqu'à présent. Cela fonctionne très bien et il 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 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, 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 prudent d'utiliser des pixels.

12
NicolasBernier

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

J'ai ajouté un espace pour faire un petit écart entre le li et l'étoile. Le code pour l'espace est A0.

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

Un exemple plus complet de 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 versions plus anciennes IE. Vous pouvez les extraire et les inclure dans une inclusion conditionnelle si vous le souhaitez, ou les remplacer par une image de fond Mon humble avis est que les styles de balle spéciaux ainsi implémentés 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.

4
pospi
ul {
    list-style-type: none;    
}

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

Essayez ce code ...

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