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

Custom li list item with pseudo classes

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);
		});
	}
});