La taille d'une puce est définie par le navigateur, la police et la taille de la police. Bien que vous puissiez parfois augmenter la taille de la police pour augmenter la taille de la puce, une meilleure solution consiste à utiliser une image en tant que puce.

Pour changer une puce en une image, utilisez CSS sur votre page comme dans l'exemple suivant.

 ul {list-style: none; } ul li { background: url (// www.computerhope.com/issues/pictures/bullet.gif) no-repeat en haut à gauche; position d'arrière-plan: 0 5px; hauteur de ligne: 1, 5625; remplissage: 0 0 4px 30px; marge gauche: 1em; } 

Dans le code CSS ci-dessus, nous définissons d’abord le

balises pour ne montrer aucun style de liste, ce qui supprime la puce de la liste non ordonnée. Ensuite, nous définissons "ul li" pour ne changer que l'apparence de
• les balises contenues dans le
  Mots clés. La première ligne de cette section est l’arrière-plan, qui pointe vers la puce que nous utilisons dans l’exemple. Toutes les autres lignes dans ce cas donnent le remplissage et la marge autour de la balle.

  Conseil: vous pouvez également créer une classe CSS si vous souhaitez modifier une puce ou un groupe de puces sélectionné dans une liste.

  Une fois le code créé, toute liste non ordonnée HTML utilisera l'image de la puce comme puce.

  Exemple de code HTML

  Premier exemple de balle
  Deuxième puce exemple
  

  Résultats du code HTML en utilisant l'exemple CSS

  • Premier exemple de balle
  • Deuxième puce exemple