CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀

here's the @CodePen for this one works in all browsers ✅ where anchoring isn't supported, use :has() with some custom properties on :hover/:focus-visible instead of getting the bounding client rect on every hover, etc. ✅

"bUT gpT CaN dO iT if I ASk iT" the issue is, you didn't know what to ask it and it didn't know how to come up with an efficient solution (kinda fed up with some of the reply guys on this platform. you jus get muted or blocked now. don't owe you a thing)

You make me feel like I know nothing about CSS. I love it.

Don't give us the code, someone might accidentally use it

👏🏆

Sorry maybe i m missing something. Where is the magnetic effect

Its great for tooltips, custom menu dropdowns and select dropdowns when mixed with the popover api 👌🔥

yep, it's capable of a lot more too though done a lot of demos and talks around these APIs, they were my job at one point 🚀 (my name is on the spec 😉)

for this purpose, it's literally a handful of JavaScript lines to polyfill