Как делать столбы с процентами?

Question

[Daniil]

Всем добрый день подскажите пожалуйста как делать столбики с процентами

Мне кажется нужно всё это обернуть в ul и к li сделать псевдо элемент , но придётся накладывать на псевдо элемент ещё и полоску с зелёным цветом. Как легче всего это реализовать ?

Answer 1

[tantumus21]

div серого цвета. Внутри другой div, но уже зеленого цвета, ширина которого указывается в нужных процентах

Comments

[Александр]

[Daniil]

tantumus21 спасибо за решение оно идеально мне подошло

Answer 2

[Ankhena]

Во-первых, есть тег progress https://webref.ru/html/progress
Во-вторых, все это решается в один div, без вложенных спанов, дивов и прочего мусора
https://jsfiddle.net/enLoc9ga/

Где значение переменной устанавливается через js setProperty(если это меняющееся значение) (и тогда оно попадет в атрибут style, как в примере) либо через кастомное свойство в css, если это бутафория https://jsfiddle.net/enLoc9ga/1/

По запросам пользователей, вариант с выравниванием текста https://jsfiddle.net/enLoc9ga/2/

Comments

[Daniil]

molekulyarniy ничего себе никогда бы не подумал что есть такой тег . Спасибо большое.

[Ankhena]

molekulyarniy,

Padding?

Padding в % считается от ширины родителя, а не самого блока. А то было бы удобненько, конечно. Но нет, чуть хитрее.
Например, теми же кастомными свойствами и псевдо.
https://jsfiddle.net/enLoc9ga/2/