Как сделать полосы от родительского элемента для списка элементов?

Question

[podushka]

Как сделать полосы, как на фото?(уточнение: полосы, которые идут от название папки до содержания папки, слева)

Вот так при закрытой папке

А вот так, если открыть папку

Comments

[Ankhena]

Псевдоэлементами и/или фонами линейными градиентами для полосок.

Что именно вы пробовали и что не получилось?
Код в песочницу на jsfiddle.net

[podushka]

Ankhena, мне нужны те полосы слева от всех значков, которые идут от главной папки к подпапкам

[podushka]

Ankhena, https://jsfiddle.net/w72mzq50/ вот пример, только там нету этих полос.

[Ankhena]

Не_скажу Всё_равно_не_скажу, нужно
1. Убрать стандартные маркеры
2. Убрать левые margin
3. Сделать псевдоэлементы и спозиционировать их в нужное место. Флексами, гридами или абсолютами.

Альтернативный вариант: использовать левые паддинги и фон. С помощью линейного градиента нарисовать на фоне прямоугольничек.

[podushka]

Вы наверно меня не поняли, либо я вас. Мне нужна разметка от главной папки, до подпапки. Та, которая слева. Либо я уже сам ничего не понимаю....

[Ankhena]

Не_скажу Всё_равно_не_скажу,

[podushka]

Ankhena, спасибо большое! А можно будет добавить стрелочки на эти красные полосы? Как на фото. Просто наложить, анимацию я уже сделаю сам :)

[Ankhena]

Не_скажу Всё_равно_не_скажу, дорисуйте фоном.