Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS3: Individuelle Nummerierungen mit der Counter-Eigenschaft

CSS3: Individuelle Nummerierungen mit der Counter-Eigenschaft

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 26. Oktober 2012

Inhaltsverzeichnis

Mit der CSS3-Counter-Eigenschaft ist es möglich, ein beliebiges HTML-Element mit einer Nummerierung zu versehen. In den meisten Fällen reicht die einfache Nummerierung mit dem OL-Element zwar aus; allerdings sind die Gestaltungsmöglichkeiten hierbei arg eingeschränkt. Denn Nummerierung und dazugehöriger Inhalt des Listenpunktes können nur gemeinsam gestaltet werden – in Kombination mit der Counter-Eigenschaft geht es jedoch auch anders.

css3counter CSS3: Individuelle Nummerierungen mit der Counter-Eigenschaft

Liste wie gewohnt per HTML auszeichnen

Das Schöne ist, dass am HTML-Quelltext nichts geändert werden muss. Die sortierte Liste wird wie gewohnt mit dem OL-Element ausgezeichnet – das Styling erfolgt über CSS:

<ol>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
  …
</ol>

Per Stylesheets entfernen wir nun die Standardnummerierung des OL-Elememtes und setzen eine neue Nummerierung mit der Eigenschaft counter-reset. Diese erhält eine beliebige Bezeichnung, im Beispiel „liste“:

ol {
  list-style: none;
  counter-reset: liste;
}

Bei jeder neuen OL-Liste wird die Nummerierung des Counters „liste“ wieder auf „1“ gesetzt.

Nummerierung per Pseudo-Element gestalten

Jetzt muss der Liste noch mitgeteilt werden, welches Kindelement bei der Nummerierung berücksichtigt und wo die Nummerierung dargestellt werden soll; dies geschieht über die Pseudo-Elemente :before oder :after – je nachdem, wo die Nummerierung hin soll:

ol li:before {
  counter-increment: liste;
}

Neben der Angabe des Counter-Namens („liste“) besteht auch die Möglichkeit, einen Zählintervall anzugeben. Standardmäßig wird bei jedem LI-Element der Zähler um eins erhöht. Man kann den Zähler beispielsweise aber auch um zwei erhöhen:

ol li:before {
  counter-increment: liste 2;
}

Jetzt steht zwar fest, was wie nummeriert werden soll; eine Ausgabe der Nummerierung hat jedoch noch nicht stattgefunden. Hierzu müssen wir dem Pseudo-Element per content-Eigenschaft die jeweilige Nummerierung des LI-Elementes hinzufügen:

ol li:before {
  counter-increment: liste;
  content: counter(liste);
}

Wie auch bei der Standardnummerierung des OL-Elementes ist es auch bei der Counter-Eigenschaft möglich, die Art der Nummerierung – zum Beispiel arabische Zahlen („1, 2, 3 …“) oder Buchstaben („A, B, C …“) – anzugeben:

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

Da es sich bei der Nummerierung um ein Pseudo-Element handelt, lässt sich dieses unabhängig vom eigentlichen Inhalt des LI-Elementes gestalten. Schriften, Farben, Ränder und Abstände sind individuell gestaltbar und machen so sehr individuelle Aufzählungen möglich:

ol li:before {
  counter-increment: liste;
  content: counter(liste);
  border: 1px solid red;
}

Im Beispiel erhält die Nummerierung einen roten Rahmen, der sich ausschließlich auf die Zählzeichen und nicht auf das gesamte LI-Element auswirkt. Da am HTML-Quelltext selbst nichts geändert werden muss, lässt sich diese Möglichkeit auch einfach bei bestehenden Seiten nachrüsten.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Rocket Backlinks Logo.

Rocket Backlinks

Aalen

WebOptimizer Logo mit der Aufschrift: Die deutsche Agentur in Österreich.

WebOptimizer

Villach

Evergreen Media Innsbruck Logo.

Evergreen Media®

Innsbruck

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

AMZ Marketing in Regensburg Logo.

AMZ-Marketing GmbH

Regensburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten zu „CSS3: Individuelle Nummerierungen mit der Counter-Eigenschaft“
— was ist Deine Meinung?

  1. Belles Lettres sagt:
    26. Oktober 2012 um 13:51 Uhr

    Danis, oben sprichst Du von beliebigen Elementen, unten von ol, wo das Aufzählen in der Natur der Sache liegt. Ich hab es ausprobiert, es funktioniert tatsächlich mit jedem Element. Schöne Neuigkeit. Es gibt ja auch Fälle, wo man Headlines zu Kapitelnummern nummerieren will, ohne das es eine Aufzählung ist.

    Antworten
  2. jens sagt:
    26. Oktober 2012 um 10:40 Uhr

    Du hast mir wohl gestern über die Schulter geschaut, genau die gleiche Funktion habe ich gestern auch erforscht 😉

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑