Андрей Федоров

Когда блок не умещается в строку он переносится на следующую. Так? Значит нужно чтобы высота видимой области родительского блока для строки была равна одной строке, т.о. все элементы которые перенеслись на вторую строку не будут видны.

В данном случает предлагаю использовать list-style-image: url('red_triangle.png'); т.е. картинку в место маркера для элемента списка.

В вашем примере достаточно картинке и тексту добавить vertical-align: middle;
codepen.io/aliencash/pen/BzPpJW

адаптированный сайт - это более общее понятие, под этим понимаются сайты одинаково хорошо работающие и на мобильных, и на десктопах. существует два подхода в адаптации - адаптивный "резиновый" дизайн, это когда сайт может растягиваться на больше разрешения или сжиматься под малые без ущерба для функционала и сайты имеющие две версии отдельно для мобильных и отдельно для дескопов.

между inline элементами есть межсимвольный интервал. как между буквами в тексте например. нужно его удалить, либо учесть при расчете ширины элемента li
самое простое сделать так между всеми li:

<li>бла-бла-бла<!--
--><li>бла-бла-бла

animation: blink 1s linear infinite;
у вас длительность анимации 1 секунда. а вы просите 4.5 как максимум.
поправьте.
а так же измените keyframes:
0% {color: #fff}
80% {color: #fff}
81% {color: transparent}
100% {color: transparent}

codepen.io/aliencash/pen/yJEZrB
Вот, наваял. Все довольно просто. Найдите в себе силы разобраться в коде. Это будет лучше похвалой мне. Удачи.

.main li:not(:last-child) a:after{
    position: relative;
    color: #fff;
    content: " | ";
    display: block;
}

А зачем тут clip-pach?
codepen.io/aliencash/pen/qNYbAP?editors=1100#0