Separator after x elements in a react-beautiful-dnd list

Question

I'm trying to have a separator between my 3rd and 4th element in a react-beautiful-dnd <Droppable/>.

It's pretty easy to have the separator before drag and after drag, the problem is when it comes to have it stay in its place during drag. For example, if I drag my fourth element into 2nd place, I want to have these steps :

1 2 3 | 4 5

     << 4
1 2 3 | □  5

 << 4
1 2 □ | 3 5

  4
1 □ 2 | 3 5

1 4 2 | 3 5

while I drag my 4th element over.

For now, I'm using CSS to create the separator, I'd like to keep it this way if possible. One of the problem is that react-beautiful-dnd does not move html elements up and down the list, it transforms them using css translate(x,y), which is hard to track to know which elements are the 3rd and 4th at any point.

Is there any way to know an element has moved up/down the list using css ? Or to add a specific class when an element is being moved (moved by the api, not by the user dragging) ?

Also, using 2 lists with automated swapping seems complex for that kind of problem, but I might just have to go for it...

If anyone has an idea on how to achieve this, I'll be very grateful :)

Cheers

Edit: The separator is created like this:

Draggable component (created in a loop):

<Draggable draggableId={UNIQUE_ID} index={index}>
    {(provided) => (
        <li key={index} ref={provided.innerRef} className={index === 2 ? "3rd-element" : ""}
            {...provided.draggableProps} {...provided.dragHandleProps}>
            <div>
                Content
            </div>
        </li>
    )}
</Draggable>

CSS:

li.3rd-element {
    border-bottom: 2px dashed #d70064;
    padding-bottom: 0.5rem;
    margin-bottom: 0.3rem;
}