Есть input с type=range, к нему (и к его бегунку) применены кастомные стили (ширина инпута = 60vw, если это важно). Есть 4 значения, стоит задача: сделать "насечки" на двух положениях (т.к. другие два это начало и конец). Ок, я создаю before и after (у div, в котором вложен input. Ширина дива равна ширине инпута), первый располагаю на 33%, а второй — на 66%. Насечки получаются левее бегунка. Делаю поправку на ширину бегунка (и про себя удивляясь тому, что не центр бегунка ставится на эти позиции а его левый край) через calc(33% + 7.5px) (половина ширины бегунка) и... Опять насечка не по центру! Я бы подумал, что дело в неучтённой ширине насечки (ширина = 1.5px), но, видимо, нет, т.к. с разным размером документа разное расстояние между насечкой и бегунком. Прошу помочь разобраться, живой пример
здесь (смотреть в хроме).
Простой