Here is my numbered list code, the problem is that it starts counting from one and you need to start from scratch. How to implement it on CSS? There is no possibility to change HTML. This is what I spend on Joomla.

.lk_meny_active ul { counter-reset: li; } .lk_meny_active ul li a:before { border: 2px solid #666; color: #666; content: counter(li, decimal); counter-increment: li; display: inline-block; font-size: 24px; height: 30px; line-height: 30px; margin-left: -50px; margin-right: 10px; padding: 0; text-align: center; width: 33px; } 
 <div class="lk_meny_active"> <ul class="menu" style="display: block;"> <li class="current active" id="item-110"> <a href="/index.php/obem-raboty"> <span> Объем работы</span> </a> </li> <li id="item-111"> <a href="/index.php/rabota-v-gruppe-vk"> <span> Работа в группе ВК</span> </a> </li> <li id="item-112"> <a href="/index.php/ceremonial"> <span> Церемониал</span> </a> </li> <li id="item-113"> <a href="/index.php/razmeschenie-soobscheniya"> <span> Размещение сообщения</span> </a> </li> <li id="item-114"> <a href="/index.php/naznachenie-znakomstva"> <span> Назначение знакомства</span> </a> </li> <li id="item-149"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Знакомство</span> </a> </li> <li id="item-150"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Выбор</span> </a> </li> <li id="item-151"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Установление доверия</span> </a> </li> <li id="item-152"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Выбор спонсора</span> </a> </li> <li id="item-153"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Слово партнера</span> </a> </li> <li id="item-154"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Запуск</span> </a> </li> <li id="item-155"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Становимся спонсором</span> </a> </li> <li id="item-156"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Установление доверия</span> </a> </li> <li id="item-157"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Заключение партнерства</span> </a> </li> </ul> </div>

    2 answers 2

    C zero counter-reset: li -1;

    counter-reset

     .lk_meny_active ul { counter-reset: li -1; } .lk_meny_active ul li a:before { border: 2px solid #666; color: #666; content: counter(li, decimal); counter-increment: li; display: inline-block; font-size: 24px; height: 30px; line-height: 30px; margin-left: -50px; margin-right: 10px; padding: 0; text-align: center; width: 33px; } 
     <div class="lk_meny_active"> <ul class="menu" style="display: block;"> <li class="current active" id="item-110"> <a href="/index.php/obem-raboty"> <span> Объем работы</span> </a> </li> <li id="item-111"> <a href="/index.php/rabota-v-gruppe-vk"> <span> Работа в группе ВК</span> </a> </li> <li id="item-112"> <a href="/index.php/ceremonial"> <span> Церемониал</span> </a> </li> <li id="item-113"> <a href="/index.php/razmeschenie-soobscheniya"> <span> Размещение сообщения</span> </a> </li> <li id="item-114"> <a href="/index.php/naznachenie-znakomstva"> <span> Назначение знакомства</span> </a> </li> <li id="item-149"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Знакомство</span> </a> </li> <li id="item-150"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Выбор</span> </a> </li> <li id="item-151"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Установление доверия</span> </a> </li> <li id="item-152"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Выбор спонсора</span> </a> </li> <li id="item-153"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Слово партнера</span> </a> </li> <li id="item-154"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Запуск</span> </a> </li> <li id="item-155"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Становимся спонсором</span> </a> </li> <li id="item-156"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Установление доверия</span> </a> </li> <li id="item-157"> <a href="javascript:void(0)" disabled="disabled" class="lk_meny_active_no"> <span> Заключение партнерства</span> </a> </li> </ul> </div>

      All figured out, done so

       .lk_meny_active ul { counter-reset: li -1; }