Нумерованый список и под список

#html #css #ul

Есть нумерованный список который начинается с "1". Нужно сделать так чтобы под список
начинался с цифры- с которой начинается родительский элемент.


Возможно ли сделать такое средствами css без js?



.list {
    color: $color-primary;
    font-weight: 600;

    & > li {
        &:before {
            margin-right: 1.2rem;
        }

        ul {
            color: $color-minor-dark;

            li {
                &:before {
                    margin-right: 1.2rem;
                }
            }
        }
    }

    &.numeration {
        counter-reset: list decimal;

        & > li {
            list-style-type: none;

            &:before {
                counter-increment: list;
                content: counter(list) ".";
                color: $color-active;
            }

            ul {
                counter-reset: list decimal;

                & > li {
                    &:before {
                        counter-increment: lists;
                        content: counter(lists) "." counter(decimal);
                    }
                }
            }
        }
    }

    &.sm {
        font-size: 1.4rem;

        & > li {
            & + li {
                margin-top: 1.2rem;
            }

            ul {
                margin-top: 1.2rem;
                margin-left: 1.6rem;

                & > li {
                    margin-top: 1.2rem;
                    padding-left: 1.2rem;
                }
            }
        }
    }

    &.md {
        font-size: 1.6rem;

        & > li {
            & + li {
                margin-top: 1.4rem;
            }

            ul {
                margin-top: 1.4rem;
                margin-left: 1.6rem;

                & > li {
                    margin-top: 1.4rem;
                    padding-left: 1.2rem;
                }
            }
        }
    }
}

  
work status
  
annual income
  
net worth
      

          
forex market
      
  
  
position 5




    

Ответы

Ответ 1

ol {
  /* убираем стандартную нумерацию */
  list-style: none; 
  /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано – по
умолчанию оно равно 0 */ 
  counter-reset: li; 
}

li:before {
  /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает,
что содержимое, вставляемое при помощи свойства content, будет располагаться перед
пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию
равно 1). */
  counter-increment: li; 
  /* С помощью свойства content выводится номер пункта списка. counters() означает,
что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка
в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется
перед содержимым каждого пункта списка */
  content: counters(li,".") ". "; 
}

  
пункт
 
  
пункт           
    

      
пункт
 
      
пункт
 
      
пункт
        

          
пункт
 
          
пункт
 
          
пункт
  
        
      
 
      
пункт
   
    
  
 
  
пункт
         
  
пункт