Страницы

Поиск по вопросам

воскресенье, 21 октября 2018 г.

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

Есть нумерованный список который начинается с "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


Ответ

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

  1. пункт
  2. пункт
    1. пункт
    2. пункт
    3. пункт
      1. пункт
      2. пункт
      3. пункт
    4. пункт
  3. пункт
  4. пункт

Комментариев нет:

Отправить комментарий