Pouvez-vous styliser les numéros de liste ordonnés?

89

J'essaie de styliser les nombres dans une liste ordonnée, j'aimerais ajouter la couleur d'arrière-plan, le rayon de la bordure et la couleur pour qu'ils correspondent au design sur lequel je travaille:

entrez la description de l'image ici

Je suppose que ce n'est pas possible et je devrai utiliser des images différentes pour chaque numéro, c'est-à-dire

ol li:first-child {list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');} 
etc...

Existe-t-il une solution plus simple?

html css html-lists sprite Pixelomo
la source
3
Vous pouvez rechercher une solution à partir de ma démo ici jsfiddle.net/viphalongpro/Hj8Nn BTW, je ne pense pas que ce soit impossible à rechercher, la recherche en premier peut vous donner beaucoup de résultats , directement dans SO, ce genre de question a été demandé à plusieurs reprises.
King King
1
quelques liens pour les informations 1. codeitdown.com/ordered-list-css-styles 2. css-tricks.com/numbering-in-style C'est un bon qtn, mais un peu de recherche pourrait vous avoir la réponse
crafter
1
@KingKing - Je suggérerais de marquer ceci comme un double alors ...
Lee Taylor

Réponses:

188

Vous pouvez le faire en utilisant des compteurs CSS , en conjonction avec le :beforepseudo élément:

 ol {
   list-style: none;
   counter-reset: item;
 }
 li {
   counter-increment: item;
   margin-bottom: 5px;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: white;
   width: 1.2em;
   text-align: center;
   display: inline-block;
 }
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
Développer l'extrait

SW4
la source
12
Le counter-reset: item;devrait aller dans le bloc ol, sinon le compteur ne sera pas réinitialisé dans <ol> imbriqué.
Michael Klöpzig
2
une belle solution, mais comment se passe le rendu quand le corps de l' liélément fait plus d'une ligne?
cmhughes
Je pense que, comme dans stackoverflow.com/questions/13354578/... , vous pouvez utiliser par exemple `margin-left: -2.0em; width: -2.0em; `
cmhughes
Une valeur de 50%for border-radius(plutôt que de 100%) est suffisante pour obtenir un cercle. (Voir, par exemple, Lea Verou, " The curious case of border-radius: 50% ", 30 octobre 2010.)
Jim Ratliff
@cmhughes - si vous vouliez faire cela, vous donneriez le li position: relative;, et ensuite :beforevous donneriez cela position: absolute;, puis vous l'utiliseriez topet leftpour le positionner exactement comme vous le souhaitez.
mike
25

Je cherchais quelque chose de différent et j'ai trouvé cet exemple chez CodePen;

essayez ceci: http://codepen.io/sawmac/pen/txBhK

body {
  font-size: 1.2em;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 50px;
}
.custom-counter {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 5px;
}
.custom-counter li::before {
  content: counter(step-counter);
  margin-right: 20px;
  font-size: 80%;
  background-color: rgb(180, 180, 180);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 11px;
}
<ol class="custom-counter">
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
</ol>
Développer l'extrait

Russ
la source