The World Wide Web Consortium (W3C) published a First Public Working Draft of CSS Anchor Positioning last year, so I thought I would give it a try. I already had a perfect candidate to try it on: a component on my other site, adedicated.dev, which showcase my services by linking different words together. To link […]

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

This post explores CSS Anchor Positioning as a solution for linking different elements on a webpage. It discusses the benefits of using CSS Anchor Positioning over heavy JavaScript calculations, demonstrates the implementation of the solution with HTML, CSS, and JavaScript, and highlights the ease and flexibility it provides. The post also provides a real-life example of linking different words in columns.

Drawing a Line to Connect Elements with CSS Anchor Positioning