Sn0wSky

Избавиться от position: absolute
codepen.io/anon/pen/rjQRvY

Потому что после float нужно подчищать с помощью clear: both;
https://jsfiddle.net/tcoxbpyq/

https://jsfiddle.net/shm0kdta/

https://jqueryui.com/slider/#range

Ну Вы transition засунули в :hover скорее всего, а надо в исходный без :hover'a

https://jsfiddle.net/814646ey/

Цвет border-right замените на цвет фона
Высоту border-top и border-bottom на половину высоты Вашего блока
А с шириной border-right поиграйтесь так, чтобы он выпирал на столько, на сколько Вам нужно (если задать то же самое число, что и в border-top/border-bottom, получите прямой угол)

UPD.: Ярослав верно заметил, но можно обойтись без svg, даже если нужна прозрачность
https://jsfiddle.net/814646ey/2/

может просто hasAttribute не принимает второго параметра, и отрабатывает всегда первый случай, говорящий, что "id" существует, не сравнивая ни с чем?
www.w3schools.com/jsref/met_element_hasattribute.asp

opacity: 0;
у
.steps_holder .circle_small_holder

У вас стоит какая-то анимация появления, которая запускается js'ом, который не срабатывает

Не разделяя один блок на две части, мне кажется разве что через canvas

Если надо просто разделить, вариант с двумя блоками гораздо быстрее

:before и :after тут не при чём. Просто на :hover зачем-то их добавляют, но сути не меняет

Просто есть overlay с position: absolute, которой появляется на hover, без всякого js

https://jsfiddle.net/e0drh965/