Можно ли реализовать это без position: absolute?

Question

[Валентин Бируля]

Есть код: https://jsfiddle.net/76ux5gs1/6/

Нужно реализовать что то типо такого(Чтобы цифра "прилипла к верхней части"):


Очень не хочется использовать "position: absolute;" можно как нибудь без него?

Заранее спасибо

Comments

[Валентин Бируля]

Вот что случается когда не верстал около года... Очень стыдно

[Антон Литвиненко]

Я такие штуки всегда делаю через псевдоэлементы с позишн абсолют

Answer 1

[Rsa97]

Comments

[Валентин Бируля]

О точно существует же тег ol спасибо за более семантическую верстку

[Ankhena]

Валентин Бируля, вместо value можно использовать счетчики
https://webref.ru/css/counter-reset

[Rsa97]

Ankhena, Со счётчиком проблема, когда он перейдёт за 10. Строковых функций в CSS, вроде, нет. Так что будет либо 09 ... 010, либо 9 ... 10. Сделать 09 ... 10 не получится.

[Валентин Бируля]

Rsa97, А у меня к сожалению как раз 10 элементов в списке :(

[imko]

Rsa97, через псевдокласс nth-child можно сделать до 10 чтоб ноль был в контенте а после не было

[Ankhena]

Rsa97, если совсем-совсем не знать количество элементов, то без js туго.
Но до 99 элементов решается просто

ol li:nth-child(-n+9):before {
	content: "0" counter(num);
}

https://jsfiddle.net/xmjao4c7/

[apoca1ipsis]

Можно же без data-value и без JS, только на css. Данный вариант работает и после 99.

ol {
counter-reset: decimal;
list-style: none;
}

ol li:before {
counter-increment: decimal;
content: counter(decimal,decimal-leading-zero) ".";
list-style-type: decimal-leading-zero;
}

https://jsfiddle.net/apoca1ipsis/d7k8njwf/

[Rsa97]

apoca1ipsis, Но тогда не получится сделать два списка в одном стиле, если в первом, например, 5 элементов, а во втором 10. В первом списке лидирующих нулей не будет.

Answer 2

[apoca1ipsis]

.number {vertical-align: top;}

Answer 3

[MagicMight]

Может, вообще так?)
https://jsfiddle.net/03pkb8n9/1/

Comments

[Валентин Бируля]

К сожалению ваше решение не подходит(Оно не семантическое и там цифры не ровно-ровно по блоку), но спасибо за ответ, довольно интересное решение