Как убрать выталкивание от :before?

display: flex;
align-item: flex-end;

Вот тут глянь, мож поможет!

position: relative элементу, к которому добавляешь псевдоэлемент, position: absolute псевдоэлементу и спозиционировать

Вам может помочь абсолютное позиционирование псевдоэлемента.
li.active
position: relative
li.active:before
content: ""
width: /*ширина капли*/
height: /*высота капли*/
background-image: url("урл картинки")
position: absolute
top: -n /*высота капли + отступ*/
left: 50%
transform: translateX(-50%)
Алгоритм такой. Не видно, что у вас там по стилям. Может подшаманивать под себя немного нужно будет значения абсолютных позиций.