• 核心挑战： 在 CSS 中视觉化连接相关元素（如评论线、Tooltip 工具提示）通常很棘手，传统方案往往依赖 JavaScript 计算、额外的标签或不稳固的布局假设。
• 锚点定位机制：
• 使用 anchor-name (锚点名称) 为一个元素命名作为参考点。
• 使用 anchor-scope (锚点作用域) 限制锚点名称的影响范围，确保组件的独立性。
• 在另一个元素中使用 anchor() (锚点函数) 获取参考元素的边界位置（如 start, end, center）。
• 代码实现：
• 通过为 .comment 和 .reply 定义锚点名，在回复的 ::after 伪元素中利用 inset 属性引用这些锚点，从而精确绘制连接线。
• 结合 Logical Properties (逻辑属性) 如 inset-block-start，使布局能够自适应不同的语言和书写方向。
• 技术优势：
• 无需 JavaScript： 减少了脚本负担，提升了性能。
• 布局感知： 当内容增长或容器变动时，连接线会自动更新位置。
• 代码简洁： 减少了冗余的 Wrapper (包装) 元素。
• 浏览器兼容性： 目前处于 Baseline: Newly available (基线：新近可用) 阶段，主要在最新版本的 Chromium 系浏览器中得到支持，建议作为 Progressive Enhancement (渐进增强) 使用。

Roland Franke - Frontend Developer

Drawing Connections with CSS Anchor Positioning - Roland Franke

A practical exploration of CSS Anchor Positioning and the anchor() function to visually connect related elements without extra markup.