web-dev-qa-db-fra.com

HTML dash de type liste

Existe-t-il un moyen de créer un style de liste en HTML avec un tiret (i.e. - ou - – ou - —) i.e.

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

Sortie:

- abc

Il m'est arrivé de faire cela avec quelque chose comme li:before { content: "-" };, bien que je ne connaisse pas les inconvénients de cette option (et que je serais très obligé de recevoir des commentaires).

De manière plus générique, cela ne me dérangerait pas de savoir comment utiliser des caractères génériques pour les éléments de liste.

htmlcssxhtmlhtml-lists
191
Brian M. Hunt

Vous pouvez utiliser :before et content: en gardant à l'esprit que cela n'est pas pris en charge dans IE 7 ou inférieur. Si cela vous convient, c'est la meilleure solution. Voir les tableaux de compatibilité Puis-je utiliser ou QuirksMode CSS pour plus de détails.

Une solution un peu plus sournoise qui devrait fonctionner dans les anciens navigateurs consiste à utiliser une image comme point de repère et à lui donner l’aspect d’un trait. Voir la page W3C list-style-image pour des exemples.

96
Darko Z

Il existe une solution simple (text-indent) pour conserver l'effet de liste indenté avec la pseudo-classe :before.

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

200
aron.lakatos

Utilisez ceci:

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

Voici une version sans position relative ou absolue et sans retrait du 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;
}

Prendre plaisir ;)

55
velop
ul {
  list-style-type: none;
}

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

démo violon

25
Keyan Zhang

Laissez-moi ajouter ma version aussi, principalement pour que je retrouve à nouveau ma solution préférée:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}
<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

https://codepen.io/burningTyger/pen/dNzgrQ

11
three
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
6
user3849374

Dans mon cas, ajouter ce code à CSS

ul {
    list-style-type: '- ';
}

était suffisant. C'est simple comme ça.

4
Albert Sosnowski

Voici mon violon version: 

La classe (modernizr) .generatedcontent sur <html> signifie pratiquement IE8 + et tous les autres navigateurs rationnels.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}
4
biziclop

Ma solution consiste à ajouter une balise span supplémentaire avec mdash:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

et en ajoutant à css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}
3
Victor Stagurov

Je ne sais pas s’il existe un meilleur moyen, mais vous pouvez créer un graphique personnalisé représentant un tiret, puis faire savoir au navigateur que vous souhaitez l’utiliser dans votre liste avec la propriété list-style-type . Un exemple sur cette page montre comment utiliser un graphique comme une puce.

Je n'ai jamais essayé d'utiliser: avant dans la façon dont vous avez, même si cela peut fonctionner. L'inconvénient est qu'il ne sera pas supporté par certains navigateurs plus anciens. Ma réaction instinctive est que cela reste suffisamment important pour être pris en compte. À l'avenir, cela ne sera peut-être pas aussi important.

EDIT: J'ai fait un peu de tests avec l'approche du PO. Dans IE8, je ne parvenais pas à maîtriser la technique, ce n'est donc certainement pas encore multi-navigateur. En outre, dans Firefox et Chrome, la définition du type de liste-style sur aucun conjointement semble être ignorée.

2
TNi

Au lieu d'utiliser lu li, utilisez dl (definition list) and dd. <dd> peut être défini en utilisant le style CSS standard tel que {color:blue;font-size:1em;} et utiliser comme marqueur le symbole que vous placez après la balise html. Cela fonctionne comme ul li, mais vous permet d'utiliser n'importe quel symbole, il vous suffit de l'indenter pour obtenir l'effet de liste indenté que vous obtenez normalement avec ul li.

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

Vous donne beaucoup de code plus propre! De cette façon, vous pouvez utiliser n'importe quel type de caractère comme marqueur! L'indentation est d'environ -10px et cela fonctionne parfaitement!

2
Carolyne Comtois

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
2
blackchestnut

Autrement:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}
2
imos

Une des principales réponses ne fonctionnait pas pour moi car, après quelques essais et erreurs, le li: before avait également besoin de l'affichage de la règle CSS: inline-block.

C'est donc une réponse qui fonctionne parfaitement pour moi:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}
0
Joery

Pour quiconque ayant ce problème aujourd'hui, la solution est simplement:

style de liste: "-"

0
Bee Bat