Modify list counter in :before pseudo class with jQuery using start attribute

Custom li list item with pseudo classes

Aprile 20, 2016

Suppose you have two ordered list ol tags, and the second one has a start attribute.
You also have in css a style on li:before to style the number:

ol li:before {
	content: counter(item);
 }

If in the HTML you have two separate ol tags and the second with “start” attribute, it will not work, because content: counter(item) will start from 1 again.

To fix it you can use this javascript trick using jQuery to add apply start to the :before pseudo class element:

$('ol').each(function(){
	if($(this).attr("start")) {
		var $q = parseInt( $(this).attr("start") );
		if($q>0) $q--;
		$(this).find("li:first").each(function(){
			$(this).css("counter-reset","item " + $q);
		});
	}
});

Author

PHP expert. Wordpress plugin and theme developer. Father, Maker, Arduino and ESP8266 enthusiast.