Wie wäre es mit einem klassischen CSS-Trick! Das Erhalten benutzerdefinierter Stile für Listen ist dank der Einführung der CSS-Zähler für counter-increment und counter-reset gar nicht mehr so schwierig. Ich wollte nur sicherstellen, dass Sie wissen, wie es funktioniert und einige einfach zu kopierende Beispiele griffbereit haben.
Nehmen wir an, alles, was Sie tun möchten, ist, die verdammten Zahlen zu gestalten
Oh, und hey, wenn Sie sich Sorgen um die Ausrichtung der Zahlen machen, könnten Sie den CSS-Zähler mit ::marker anwenden und die Magie von list-style für die automatische Ausrichtung erledigen lassen, oder hier ist eine Idee mit Subgrid.
Hier ist ein Beispiel für einen CSS-Zähler von den Seiten der CodePen Challenges
The Keyframers haben neulich ein Pen erstellt, das ziemlich coole Stile verwendete. Hier ist eine Neufassung
Rezeptseiten sind großartige Orte, um nach benutzerdefinierten Listenstilen zu suchen, da Schrittlisten ein sehr verbreitetes Merkmal sind. Auf Mat Marquis' Seite hat er einige lustige. Ich habe seinen CSS kopiert und hierher verschoben
Beispiele für CSS-Zähler
Schauen Sie sich unbedingt die lustige kleine Media-Query-Änderung an. Lea Verous' Food-Seite hat natürlich auch CSS-Zähler-basierte Nummerierung.
Hier ist eine interessante CSS-Zähler-Demo von Jonathan Snook, die ein "Timeline"-Aussehen hat und benutzerdefinierte Zähler verwendet, um jeden Abschnitt zu beschriften
Trend 2018 Warnung. Jeder auf der Erde wird anfangen, seine Listen-Nummern zu stylen.
Es ist etwas Befriedigendes, Konzepte, die man vor langer Zeit gelernt hat, wieder aufzugreifen und eine neue Verwendung dafür zu finden. Danke für diesen Beitrag. (ein bisschen Nostalgie)
Gibt es eine Möglichkeit, die Zahlen/Aufzählungszeichen so "hängen" zu lassen, wie es normale tun würden?
Wahrscheinlich negativer Margin oder negative Text-Einrückung ... hängt von Ihrem benutzerdefinierten Styling ab!
Das Timeline-Konzept ist wirklich cool. Ich kann mir vorstellen, dass das eine unterhaltsame Art ist, Gespräche zwischen zwei Personen zu gestalten.