Switch74

здесь как больше нравится, если при определенных условиях линия должна исчезать, то лучше через after если нет, то можно и hr

https://jsfiddle.net/6jL30trm/

а линия разве не может перескакивать на следующую строку, она ведь находится как бы в этом же блоке что и текст и как я понимаю текст должен отталкивать линию ниже

а что мешает поставить hr какие проблемы с адаптивом при :before/:after?

почитайте про vertical-align у разных элементов он работает по разному в вашем случае он будет отрабатывать на элементах относительно соседних https://habr.com/ru/company/netcracker/blog/277433/

html,css,js дальше смотришь на что способны всякие фреймворки и библиотеки, где и как они применяются выбираешь для себя несколько и начинаешь изучать их (для начала наверно самые распространенные) js хватит поверхностного понимания что и как работает ибо в большинстве случаев он нужен чтобы сделать заплатку или добавить частный, сложный функционал ну и чтобы не писать кучу кода, в любом случае будете использовать какие-то фреймворки на вроде jquery...

li a { vertical-align: top; }

все открывается https://jsfiddle.net/mej3xzwy/

а что мешает вам его сделать самому, например в том же Excel? MOCK_DATA.csv

:) там кавычек в 3 раза больше стало

у меня выдает, приведите csv файл в порядок

"speed;1" "weigth;2" "tall;3" "age;18?"

а зачем кавычки в csv?

так сделано под а у вас в файле speed;weigth;tall;age 1;2;3;18 в вашем случае нужно первую строку использовать для создания ключей массива а вторую значений

1. первая колонка из csv у вас не вставляется и является ключом 2. туда куда вы вставили 1 и 3 нельзя вставлять данные предположу, что вам нужно https://jsfiddle.net/9bzwpmya/