Есть нумерованный список который начинается с "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,".") ". "; }
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
- пункт
Комментариев нет:
Отправить комментарий