CSS-Code zur automatischen Nummerierung von Abbildungen und Tabellen

In einem früheren Beitrag habe ich bereits gezeigt, wie sich Bildunterschriften in WordPress mithilfe von CSS automatisch nummerieren lassen. Dadurch werden die Beschriftungen von Abbildungen automatisch um eine fortlaufende Nummerierung wie „Abbildung 1“, „Abbildung 2“ usw. ergänzt.

Da ich inzwischen auch Tabellen einheitlich beschriften und nummerieren möchte, habe ich die damalige CSS-Lösung entsprechend erweitert. Neben Abbildungen erhalten nun auch Tabellen einen eigenen, unabhängigen Zähler und werden automatisch als „Tabelle 1“, „Tabelle 2“ usw. nummeriert.

Die ursprüngliche Umsetzung und die Hintergründe zur automatischen Nummerierung von Bildunterschriften sind im damaligen Artikel beschrieben. Im Folgenden zeige ich die aktualisierte Variante, die Abbildungen und Tabellen gleichermaßen berücksichtigt.

Der für WordPress angepasste CSS-Code, der nun sowohl Abbildungen als auch Tabellen automatisch und unabhängig voneinander nummeriert, ist daher:

/* Counter-Init */
body {
	counter-reset: figCounter tabCounter;
}

/* 2. We tell each occurrence of this element to increment the counter */
.wp-block-image figcaption {
	counter-increment: figCounter;
	    margin-bottom: 1em;
    margin-top: .5em;
    font-style: italic;
    text-align:center;
}

/* 3. We display the value of the counter before the element */
.wp-block-image figcaption:before {
	content: 'Abbildung '  counter(figCounter) ': ';
}

/* 2. We tell each occurrence of this element to increment the counter */
.wp-block-table figcaption {
	counter-increment: tabCounter;
	margin-bottom: 1em;
	margin-top: .5em;
	font-style: italic;
	text-align:center;
}

/* 3. We display the value of the counter before the element */
.wp-block-table figcaption:before {
	content: 'Tabelle '  counter(tabCounter) ': ';
}