Draw a connecting line between two elements

To draw a line between two elements, mainly two approaches exist: the first relies on CSS's ::after for static positioning, the second entails SVG and JavaScript for dynamic scenarios.

CSS-only solution using the ::after pseudo-element:

#element1::after {
  content: ''; /* our magical line is invisible without this */
  position: absolute; /* trust me, I am the absolute position */
  width: calc(100% - 20px); /* Shrink a bit, it's not a weight-loss program though */
  height: 2px; /* a thin line, like my patience */
  background: black; /* black, like my coffee */
  top: 50%; /* meet me in the middle */
  left: 100%; /* all the way to the... right? */
}


Corresponding HTML:

<div id="element1">Element 1</div>
<div id="element2" style="margin-left:100px;">Element 2</div>


SVG & JavaScript to draw lines in real-time:

const drawLine = (el1, el2, line) => {
  const {right, top} = el1.getBoundingClientRect(); /* Element 1, report your coordinates! */
  const {left, bottom} = el2.getBoundingClientRect(); /* Element 2, report your coordinates! */
  line.setAttribute('x1', right); /* X marks the spot... not really, just kidding, starts from the right */
  line.setAttribute('y1', top); /* Lift off to... the top? */
  line.setAttribute('x2', left); /* Let's meet at the left corner */
  line.setAttribute('y2', bottom); /* Descend to the bottom! */
};


Implement with SVG:

<svg><line id="line" stroke="black"/></svg>


Invoke with:

drawLine(document.getElementById('element1'), document.getElementById('element2'), document.getElementById('line')); /* Magic in one line of code */
