Update... All you need is this for a 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); } Create an anchor on hover, makes sense! 🤦‍♂️ h/t @yassi_lah for the push 🤙

This one is an absolute gift IMO 🎁 Nukes a lot of JS There are also a couple of other CSS Anchor Positioning pieces that once they get implemented will streamline things a little more 🤏

@yassi_lah what do you use for the animation zooms etc?

@yassi_lah Waiting for support 😀

@yassi_lah That’s how the one I shared earlier works

@yassi_lah You could have that in a sense though, right? For <nav> related anchors, you could reserve the name --nav-anchor for example. You're only going to be using it at any one time as you wouldn't be able to hover multiple navs at once 🤔

@yassi_lah 🥹 Can you stop posting so many cool demos? 😵 I can't follow you haha

@yassi_lah Damnnn @jh3yy just makes day better 🥺❤️

@yassi_lah simple and clean :)