Comment remplacer les puces de la liste HTML par des symboles de tiret ?

Personnalisation des styles de liste en HTML avec des symboles de tiret

En HTML, le style de liste par défaut est rendu sous la forme d'un disque ou d'un carré, mais vous Vous souhaiterez peut-être personnaliser la puce avec un symbole de tiret. Pour y parvenir, vous pouvez utiliser CSS pour modifier l'apparence de la liste.

Utilisation de la pseudo-classe :before

Une approche consiste à utiliser la pseudo-classe :before pour insérer un tiret avant chaque élément de la liste. Cette technique vous permet de conserver l'indentation de liste standard tout en ajoutant un tiret. Cependant, cette approche peut introduire des problèmes de compatibilité potentiels entre différents navigateurs en raison des variations dans la prise en charge CSS.

Combiner list-style-type avec text-indent

Une approche plus fiable La solution consiste à utiliser list-style-type: none pour supprimer la puce par défaut, puis à définir text-indent sur une valeur négative pour conserver l'effet de liste en retrait. De plus, vous pouvez utiliser :before pour insérer le symbole de tiret, garantissant ainsi un rendu cohérent dans tous les navigateurs.

Exemple de code

<code class="css">ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}</code>

Utilisation et sortie

Dans votre HTML, vous pouvez appliquer la classe en pointillés à la liste non ordonnée (

) :

<code class="html">Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text</code>

Cela produira une liste personnalisée avec des tirets comme puces tout en préservant l'indentation de la liste :

• Premier
• Deuxième
• Troisième

• Premier

  • Deuxième
  • Troisième

Cette méthode est compatible avec tous les navigateurs et remplace efficacement le style de liste par défaut par des tirets personnalisés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!