Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn't seem like it would be possible in CSS alone... but...

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

A deep dive into using CSS anchor positioning to draw an arrow between two draggable circles, displaying the distance between them and detecting collisions — all without JavaScript. The technique uses anchor positioning to create a bounding rectangle, clip-path with flipped pseudo-elements for directional arrows, container query units for geometry calculations (atan, hypot), CSS if() for shape switching, and counters to display computed distances. The article extends the concept to graph theory, implementing a shortest-path algorithm purely in CSS.

Two Circles, One Arrow, and Anchor Positioning – Frontend Masters Blog