demo · v131

anchor-size() for proportional connectors

Using anchor-size() inside left and width lets a connector line scale proportionally to its anchor element. Drag the slider to grow the source card — the connector and label rescale with it, no JavaScript layout maths.

checking anchor-size() placement support...
160px
source
1.4× anchor width

the css

.card     { anchor-name: --src; }

.connector {
  position: absolute;
  position-anchor: --src;
  left: anchor(right);
  width: calc(anchor-size(width) * 1.4);
  top: calc(anchor(top) + anchor-size(height) / 2 - 1px);
  height: 2px;
}

.label {
  position: absolute;
  position-anchor: --src;
  left: calc(anchor(right) + anchor-size(width) * 1.4 + 8px);
  top: calc(anchor(top) + anchor-size(height) / 2 - 12px);
}

why this needed shipping

Pre-131 anchor-size() was only valid inside the sizing properties (width, height, etc.). That blocked the most natural use case for it: positional offsets that scale with the anchor. Diagram-style UIs — flowcharts, schema visualisers, code annotation overlays — had to compute the offsets in JS and rewrite them on every resize. The 131 change makes anchor-size() valid inside the inset and margin properties so the same expressions work for placement, not just sizing.

see also