Çok nadir kullandığım css ile sayaç yöntemi, php ile $i basmak yerine counter denemiştim

body { counter-reset: menu; } // Resetlemeye
h1:before {
   counter-increment: menu; // Saydırılcak tag
   content: counter(menu); // Yazdırılıcak kısım
 	}

After ile de kullanılabiliyor, css ile de istenilen özellikler verilebiliyor. Alt taglarda saydırılcaksa üst tagada resetlemek gerekiyor .  Çıktısı >

Kaynak : http://www.w3schools.com/cssref/tryit.asp?filename=trycss_gen_counter-reset