Comment styliser des listes HTML avec des marqueurs de liste de tirets à l'aide de CSS ?

Styliser des listes HTML avec des marqueurs de liste de tirets

En HTML, le type de style de liste par défaut est "disque", qui affiche des puces . Pour créer une liste avec des marqueurs de tiret à la place, vous pouvez utiliser CSS.

Une solution consiste à utiliser la propriété text-indent pour mettre en retrait les éléments de la liste et le content propriété du pseudo-élément :before pour insérer un tiret caractère.

Exemple :

<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>

HTML :

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

Résultat :

- First
- Second
- Third

Cette approche permet de conserver l'effet de liste en retrait tout en ajoutant un marqueur de tiret.

Marqueurs de liste génériques :

Vous pouvez utiliser n'importe quel caractère Unicode comme marqueur de liste en définissant la propriété content du :before pseudo-élément au code d'entité HTML du caractère souhaité. Par exemple, pour utiliser un astérisque (*), utilisez :

<code class="css">ul > li:before {
  content: "*";
}</code>

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!