HTML list-style-type dash

Question

Existe-t-il un moyen de créer un style de liste en HTML avec un tiret (c'est-à-dire - ou -) ? – ou - — ), c'est-à-dire

<ul>
  <li>abc</li>
</ul>

Sortie :

- abc

J'ai eu l'idée de faire cela avec quelque chose comme li:before { content: "-" }; mais je ne connais pas les inconvénients de cette option (et je vous serais reconnaissant de me faire part de vos commentaires).

De manière plus générale, j'aimerais bien savoir comment utiliser les caractères génériques pour les éléments de liste.

Answer 1

Il existe un correctif facile (text-indent) pour conserver l'effet de liste indentée avec l'attribut :before pseudo-classe.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

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

Answer 2

Vous pourriez utiliser :before y content: en gardant à l'esprit que cela n'est pas pris en charge par IE 7 ou inférieur. Si cela ne vous pose pas de problème, c'est la meilleure solution. Voir le Puis-je utiliser o QuirksMode Tableaux de compatibilité CSS pour plus de détails.

Une solution un peu plus désagréable, mais qui devrait fonctionner dans les anciens navigateurs, consiste à utiliser une image pour la puce et à faire en sorte que l'image ressemble à un tiret. Voir le W3C list-style-image page par exemple.

Answer 3

Voici une version sans position relative ou absolue et sans alinéa de texte :

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

Profitez-en ;)

Answer 4

Utilisez ça :

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Answer 5

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

Démo violon