Возможно ли поменять цифры у списка ?
Кто нибудь знает как поменять цифру у списка что бы вместо 1,2,3... были свои номера?
Ответы (2 шт):
Автор решения: CbIPoK2513
→ Ссылка
Можно, но использовать не дефолтные числа самого списка, а делать "свои" при помощи псевдоэлемента.
Т.е. вы отключаете стандартный счётчик, вешаете псевдоэлемент, выводите свои значения через content.
Вот например:
ol {
list-style: none;
}
ol li {
position: relative;
}
ol li::before {
display: inline;
position: absolute;
right: calc(100% + 1ch);
}
ol li:nth-child(1)::before {content: '3.';}
ol li:nth-child(2)::before {content: '-1.';}
ol li:nth-child(3)::before {content: '120.';}
ol li:nth-child(4)::before {content: '32.';}<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>Так же можете воспользоваться счётчиками CSS
Ещё можно взять возможность правила content работать с атрибутами CSS - подробнее
ol {
list-style: none;
}
ol li {
position: relative;
}
ol li::before {
content: attr(data-num)'.';
display: inline;
position: absolute;
right: calc(100% + 1ch);
}<ol>
<li data-num="3">Item 1</li>
<li data-num="-1">Item 2</li>
<li data-num="120">Item 3</li>
<li data-num="32">Item 4</li>
</ol>
Автор решения: humster_spb
→ Ссылка
Менять дефолтное положение элементов списка можно с помощью order, предварительно задав списку display: flex, а всем элементам - самый большой номер, который есть в Вашем списке:
ol {
display: flex;
flex-direction: column;
}
li {
order: 10;
}
li:nth-of-type(6) {
order: 1;
}
li:nth-of-type(3) {
order: 2;
}
li:nth-of-type(9) {
order: 3;
}<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>