Personnaliser les puces des éléments de liste à l'aide de CSS

Question

Est-il possible de changer la taille de la puce d'un élément <li> ?

Jetez un œil au code ci-dessous :

 li {
    list-style: square; // I want to change the size of this squared bullet. 
}

Je n'arrive pas à trouver un moyen d'y parvenir.

Answer 1

Vous pouvez envelopper le contenu du li dans un autre élément tel qu'un span . Ensuite, donnez li plus grande font-size , et fixer une normale font-size de retour sur le span :

http://jsfiddle.net/RZr2r/

 li {
    font-size: 36px;
}
li span {
    font-size: 18px;
}
<ul>
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
</ul>

Answer 2

Selon le niveau de prise en charge d'IE requis, vous pouvez également utiliser le sélecteur :before avec le style de puce défini comme propriété de contenu.

 li {  
  list-style-type: none;
  font-size: small;
}

li:before {
  content: '\2022';
  font-size: x-large;
}

Vous devrez peut-être rechercher le style de puce que vous souhaitez dans le code HTML ASCII et utiliser un convertisseur pour la valeur CSS Hex.