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

Question

Je dois utiliser, par exemple, le symbole étoile (★) comme une balle.

J'ai lu le module CSS3: Listes , qui décrit, comment utiliser un texte personnalisé en tant que puce, mais cela ne fonctionne pas pour moi. Je pense que les navigateurs simples ne supportent pas le pseudo-élément :: marker

Comment le faire, sans utiliser d'images?

Answer 1

L'Utilisation Du Texte Comme Des Balles

Utiliser li:before avec un échappé Hex Entité HTML (ou tout le texte).

---

Exemple

Mon exemple va produire des listes avec des marques comme des puces.

CSS:

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

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

---

Compatibilité Du Navigateur

N'ai pas testé moi-même, mais il devrait être pris en charge comme de IE8. Au moins, c'est ce quirksmode & css-tricks dire.

Vous pouvez utiliser les commentaires conditionnels pour appliquer plus/plus lente des solutions telles que des images ou des scripts. Mieux encore, utiliser à la fois avec <noscript> pour les images.

HTML:

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

---

Sur les images d'arrière-plan

Les images de fond sont en effet faciles à manipuler, mais...

1. Prise en charge du navigateur pour background-size n'est en réalité que de IE9.
2. HTML les couleurs de texte et spéciaux (fou) les polices de caractères peuvent faire beaucoup, avec moins de requêtes HTTP.
3. Un script solution peut juste d'injecter de l'Entité HTML, et de laisser le même CSS faire le travail.
4. Une bonne réinitialiser le code CSS peut faire list-style (le choix le plus logique) plus facile.

---

Profitez de.

Answer 2

Je préférerais probablement un fond d'image, ils sont beaucoup plus efficaces et compatibles 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>
 

Answer 3

C'est la solution W3C que vous pouvez utiliser en 3012!

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

http://dev.w3.org/csswg/css-lists/#marker-content

Answer 4

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

Answer 5

Les Images ne sont pas recommandés car ils peuvent avoir un aspect pixélisé sur certains appareils (appareils Apple avec écran Retina) ou lorsque vous utilisez le zoom. Avec un personnage, votre liste est génial à chaque fois.

Ici est la meilleure solution que j'ai trouvé jusqu'à présent. Il fonctionne très bien et c'est cross-browser (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 personnage dans un bloc flottant avec une largeur fixe, de sorte que le reste du texte aligné si c'est trop long pour tenir sur une seule ligne. 1.2 em est la largeur que vous voulez pour votre personnage, de le modifier pour répondre à vos besoins. N'oubliez pas de réinitialiser le rembourrage et de la marge pour ul et li éléments.

EDIT: Être conscient que le "1.2 em" taille peut varier si vous utilisez une police différente ul et li:avant. Il est plus sûr d'utiliser des pixels.