Können Sie geordnete Listennummern stylen?

85

Ich versuche einen Weg zu finden, die Zahlen in einer geordneten Liste zu formatieren. Ich möchte ihnen Hintergrundfarbe, Rahmenradius und Farbe hinzufügen, damit sie mit dem Design übereinstimmen, nach dem ich arbeite:

Geben Sie hier die Bildbeschreibung ein

Ich vermute, es ist nicht möglich und ich muss für jede Nummer unterschiedliche Bilder verwenden, dh

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

Ich dachte, ich könnte Sprites verwenden, um dies etwas besser zu machen, aber gibt es eine einfachere Lösung?

html css html-lists sprite Pixelomo
quelle
3
Sie können nach einer Lösung aus meiner Demo hier suchen. Jsfiddle.net/viphalongpro/Hj8Nn Übrigens , ich glaube nicht, dass dies unmöglich zu suchen ist. Wenn Sie zuerst suchen, erhalten Sie möglicherweise viele Ergebnisse. Genau in SO war diese Art von Frage fragte oft.
König König
1
Einige Links für die Informationen 1. codeitdown.com/ordered-list-css-styles 2. css-tricks.com/numbering-in-style Es ist eine gute Frage, aber ein bisschen Suchen hat Ihnen vielleicht die Antwort gegeben
Crafter
1
@ KingKing - Ich würde vorschlagen, dies als Duplikat zu markieren, dann ...
Lee Taylor

Antworten:

182

Sie können dies mithilfe von CSS-Zählern in Verbindung mit dem :beforePseudoelement tun :

 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>
Erweitern Sie das Snippet

SW4
quelle
12
Das counter-reset: item;sollte in den alten Block gehen, sonst wird der Zähler nicht in verschachteltem <ol> zurückgesetzt.
Michael Klöpzig
2
Eine schöne Lösung, aber wie ist das Rendern, wenn der Hauptteil des liElements aus mehr als einer Zeile besteht?
cmhughes
Ich denke, dass Sie, wie in stackoverflow.com/questions/13354578/… , zum Beispiel `margin-left: -2.0em; Breite: -2.0em; `
cmhughes
Ein Wert von 50%für border-radius(anstatt 100%) reicht aus, um einen Kreis zu erhalten. (Siehe z. B. Lea Verou, " Der merkwürdige Fall des Grenzradius: 50% ", 30. Oktober 2010.)
Jim Ratliff
@cmhughes - wenn du das machen wolltest, würdest du das geben li position: relative;, und dann :beforewürdest du das geben position: absolute;und es dann verwenden topund leftgenau so positionieren, wie du willst.
Mike
24

Ich suchte nach etwas anderem und fand dieses Beispiel bei CodePen.

Versuchen Sie Folgendes : 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>
Erweitern Sie das Snippet

Russ
quelle