Les valeurs de texte de list-style-type d'une propriété CSS, comment?

J'aimerais personnaliser la manière dont les éléments de listes non ordonnées sont présentés.

Je sais que je peux utiliser list-style-type pour changer entre none, disc, circle, square et d'autres plus ou moins de valeurs prises en charge. Je sais aussi qu'il est possible de modifier l'apparence par défaut de la liste des marqueurs de la spécification d'une image à list-style-image propriété.

Le problème est que je veux remplacer la balle avec large right arrow (►, ►) HTML caractère spécial au lieu d'utiliser une combinaison de list-style-image et triangulaire image.

Est-il possible? Btw, si c'est important, jQuery est déjà chargé sur la page de sorte qu'il ne serait pas un problème pour l'utiliser, si cela peut aider.

Grâce.

-- EDIT --

Merci, je vais utiliser une version ou l'autre en fonction du navigateur, il est nécessaire de soutenir. Btw, les deux réponses sont grand et ayant le décret, dont l'un est le "gagnant" n'est pas facile, j'ai donc opté pour la réponse donnée première.

OriginalL'auteur Paolo | 2011-04-11

  1. 19

    À ma connaissance, il n'est pas possible de le faire en utilisant les list-style-type propriété.

    Toutefois, si votre navigateur prend en charge les :avant sélecteur CSS, vous pouvez l'utiliser pour insérer la puce entités avant les éléments de la liste. Vous avez seulement besoin de convertir l'entité code hexadécimal:

    ul {
    list-style-type: none;
}

li:before {
    content: "ba
    ul {
list-style-type: none;
}
li:before {
content: "\25ba\00a0";
}
    a0"    ;
}

    Vous pouvez trouver un jsFiddle la démonstration de cette ici.

    Je travaille sur quelque chose de semblable à moi-même. Je ne vais pas la peine de poster une réponse maintenant, voici où j'en suis: jsfiddle.net/thirtydot/ZTKuS
    +1 me battre pour elle, une pratique calculatrice de conversion pour ces entités peut être trouvé ici
    +1 cela ne fonctionnera pas dans IE6 et 7 mais si ce n'est pas une nécessité, c'est une très belle solution de contournement.

    OriginalL'auteur Frédéric Hamidi

  2. 4

    @Frederic montre une intéressante solution de contournement que je voudrais aller avec, sauf si vous avez à l'appui de IE6 et 7 - dans ce cas, vous auriez à travailler avec une normale de l'élément HTML qui contient le personnage, et que vous avez du style à mettre dans le bon endroit.

    Quelque chose comme

    ul { list-style-type: none } /* Adjust margin and padding as you see fit */
ul li div.bullet { float: left; width: 30px; margin-right: 12px }

<li>
 <div class="bullet">&#9658;</div>
 List item 1
</li>

    OriginalL'auteur Pekka 웃

  3. 2

    Si vous utilisez le :avant méthode pour obtenir votre liste de style pensez à ajouter un rembourrage à la liste et une marge négative de la liste-élément pour obtenir le même espace au saut de ligne:

    ul {
    list-style: none;
    padding: 0 0 0 24px
}
ul > li:before {
    content: 'BA';
    float: left;
    margin-left: -24px
}

    Suffit d'utiliser l'exemple postet de thirtydot essayer dans jsfiddle

    OriginalL'auteur Marcel Grolms