Simple Base is an open source CMS. You Simple Base? Support the Team with a coffee.



CSS: Nummerierte Liste mit unterpunkten

Ich möchte euch heute einen kleinen CSS3 trick zeigen wie man automatisch nummerierte Listen (Ordered List <ol></ol>) mit unterpunkten oder unterüberschriften macht, so dass die auflistung mit 1, 1.1, 1.2, 1.2.1 usw. dargestellt wird. So wie z. B. in der Linken Navigation auf unseren Dokumentationsseiten.

 

Dazu einfach eine "normale" <ol><li> im HTML erstellen, wie z. B. hier:

 

<ol>
	<li>
		First
		<ol>
			<li>First child of first</li>
			<li>Second child of first</li>
		</ol>
	</li>
	<li>
		Second
		<ol>
			<li>
				First child of second
				<ol>
					<li>First child of second child</li>
					<li>Second child of second child</li>
				</ol>
			</li>
			<li>Second child of second</li>
		</ol>
	</li>
	<li>Third</li>
</ol>

 

Standardmäßig wird jeder Unterpunkt wieder bei "1" beginnen, was also zur Folge hat dass wir kein 1.1 hinbekommen z. B.. Dies sieht dann also so aus:

 

Um den Punkt "1. First child of first" auf "1.1 First child of first" zu ändern, greifen wir also nun mit CSS3 und dem :before Pseudo-Element ein. Dies schaut dann wie folgt aus:

 

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

ol li::before {
    content: counters(item,".",decimal) " ";
    counter-increment: item;
}

Dabei setzen wir den counter jedes mal zurück, zeigen den Standard listenstil (CSS-Attribut list-style) gar nicht mehr an und fügen mit dem CSS-Attribut "content" das Ganze wieder vorher ein, mit dem richtigen Separator.

 

 

Das Ganze könnt ihr euch auch auf direkt im CodePen anschauen und ggf. selbst rumprobieren. Hier geht es zum Code

 

 



Kommentare

 

 




Groß- und Kleinschreibung wird nicht beachtet!