How to snap lines from one block to another?

Question

css

Suppose there is a block declared by a class. Some, for example, a square.
Below is another exactly the same block.
How to draw a line starting from the middle of the bottom edge of box1 and ending at the middle of the top edge of box2?
A similar technology, for example, exists in word or in other services similar to it.

Answer 1

https://codepen.io/vaajnur/pen/KQRvjN

Answer 2

Pseudo-elements after or before