Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je créer des listes pointillées personnalisables et utiliser des caractères génériques comme marqueurs de liste en HTML ?

Linda Hamilton
Libérer: 2024-10-31 15:23:29
original
324 Les gens l'ont consulté

How Can I Create Customizable Dashed Lists and Use Generic Characters as List Markers in HTML?

Style de liste HTML personnalisable avec des caractères génériques

En HTML, la propriété list-style-type vous permet de contrôler l'apparence de la liste articles. Cependant, il ne permet pas d'utiliser des tirets (-) ou d'autres caractères génériques comme marqueurs de liste.

Création de listes pointillées

Pour créer une liste pointillée, vous pouvez utiliser CSS pour ajouter un pseudo-élément :before avant chaque élément de la liste. Cet élément peut ensuite être stylé pour afficher un tiret :

<code class="css">ul.dashed {
  list-style-type: none;
}
ul.dashed > li:before {
  content: "-";
}</code>
Copier après la connexion

Cela ajoute un tiret avant chaque élément d'une liste avec la classe en pointillé. Cependant, il ne conserve pas l'indentation de liste par défaut. Pour résoudre ce problème, vous pouvez ajouter une indentation de texte négative aux éléments de la liste :

<code class="css">ul.dashed > li {
  text-indent: -5px;
}</code>
Copier après la connexion

Utilisation de caractères génériques

La même approche peut être utilisée pour afficher n'importe quel caractère générique comme marqueur de liste. Remplacez simplement la propriété content du pseudo-élément :before par le caractère souhaité :

<code class="css">ul.custom-list > li:before {
  content: ">";  // Replace with the desired character
}</code>
Copier après la connexion

Note sur l'approche CSS uniquement

Alors que l'approche CSS uniquement (en utilisant li:before) ne nécessite aucune modification du contenu, elle peut avoir des implications sur les performances lorsque la liste contient un grand nombre d'éléments. L'utilisation de la propriété list-style-type avec des tirets peut être plus efficace dans de tels cas.

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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!