Comment créer des listes de style tiret en HTML : au-delà des styles de puces par défaut ?

Personnalisation du style de liste HTML : création de listes avec des tirets

En HTML, la propriété list-style-type est utilisée pour spécifier le style de puce pour les éléments de liste. Cependant, il ne prend pas en charge nativement les tirets comme puces.

Utilisation de la pseudo-classe :before

Une approche pour créer une liste de style tiret consiste à utiliser la pseudo-classe :before. Cela vous permet d'insérer du contenu avant chaque élément de la liste et de le styliser indépendamment.

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

La propriété content insère le tiret "-" avant chaque li, et margin-right fournit un espace entre le tiret et la liste. texte de l'élément.

Utilisation de l'indentation de texte

Pour conserver l'effet de liste en retrait lors de l'utilisation de la pseudo-classe :before, vous pouvez appliquer une indentation de texte négative aux éléments de la liste.

<code class="css">ul.dashed > li {
  text-indent: -5px;
}</code>

Cela neutralise l'indentation par défaut créée par le style de puce, en alignant le tiret avec le début du texte de l'élément de liste.

Personnalisation des caractères de liste générique

Pour utiliser un caractère générique comme liste bullet, vous pouvez simplement le spécifier dans la propriété list-style-type, par exemple :

<code class="css">ul.generic {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}

ul.circle {
  list-style-type: circle;
}</code>

Cela vous permet de créer des listes avec différentes formes de puces et de personnaliser l'apparence visuelle de vos listes selon vos besoins.

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!