Maison > interface Web > tutoriel CSS > Comment styliser des listes HTML avec des marqueurs de liste de tirets à l'aide de CSS ?

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

Linda Hamilton
Libérer: 2024-11-01 11:31:30
original
886 Les gens l'ont consulté

How to Style HTML Lists with Dash List Markers Using 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 caractère tiret.

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>
Copier après la connexion

HTML :

<code class="html"><ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul></code>
Copier après la connexion

Résultat :

- First
- Second
- Third
Copier après la connexion

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 pseudo-élément :before sur le code d'entité HTML du caractère souhaité. Par exemple, pour utiliser un astérisque (*), utilisez :

<code class="css">ul > li:before {
  content: "*";
}</code>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal