Wie kann ich mit CSS geordnete Listen mit kleingeschriebener alphabetischer Nummerierung und rechten Klammern erstellen?

Erstellen geordneter Listen mit Kleinbuchstaben und rechten Klammern

Der standardmäßige geordnete Listenstil für die Nummerierung mit Kleinbuchstaben verwendet Punkte. Ist es jedoch möglich, diesen Stil zu ändern und stattdessen rechte Klammern zu verwenden?

Anpassen geordneter Listenstile

Mithilfe von CSS-Zählern können wir benutzerdefinierte Listenstile erstellen. So können wir das gewünschte Ergebnis erzielen:

ol {
  counter-reset: list;
}

ol > li {
  list-style: none;
}

ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

Um diese Lösung zu demonstrieren:

<span>Custom List Style Type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Dieser benutzerdefinierte Stil rendert jetzt geordnete Listenelemente mit einer Nummerierung aus niedrigeren Buchstaben, gefolgt von einem rechten Klammer:

a) Nummer 1
b) Nummer 2
c) Nummer 3
d) Nummer 4
e) Nummer 5
f) Nummer 6

Beachten Sie, dass Sie möglicherweise die Polsterung oder andere Styling-Aspekte an Ihre spezifischen Bedürfnisse anpassen müssen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS geordnete Listen mit kleingeschriebener alphabetischer Nummerierung und rechten Klammern erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!