RAX7

Поменяй mouseover/mouseout на mouseenter/mouseleave.
https://learn.javascript.ru/mousemove-mouseover-mo...

Сделать для каждой иконки маску и применить эту маску к верхнему бордеру.

Если положение и размер этих линий не привязан к другим элементам, то можно просто нарисовать их градиентами.

Можно назвать её ярлычком ¯\_(ツ)_/¯

.block {
  position: relative;
  width: 400px;
  margin: 0 auto;
  background: red;
  height: 200px;
}

.block:before {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 2.5px);
  width: 5px;
  height: 94px;
  background-color: green;
}

Текст придется дублировать и обрезать clip-path`ом.
Без дублирования можно попробовать поиграть с mix-blend-mode, но я сомневаюсь, что найдется подходящий режим наложения для данного случая.

Еще один вариант. Без фиксированной высоты родителя, но количество дочерних элементов в левой или в правой колонке жестко фиксировано. Возможно разумней было бы не костылить в css nth-child, а навешать классы нужным элементам.

Нарисовать на js ¯\_(ツ)_/¯