Skip to content
0:000:26
Rank#33

Post by jhey ʕ•ᴥ•ʔ

Jʔ

jhey ʕ•ᴥ•ʔ

@jh3yy

Open on X

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right)

Why it is here

A magnetic hover highlight built with anchor positioning and :has(), no JavaScript involved.

Likes
4,7964.8K
Replies
43
All-time rank
#33
Week
W442023
Went viral
Posted on X
Interaction#css#anchor-positioning#hover

The digest

Get posts like this in your inbox every morning.

Get Pro
See the category
Post by Alex Widua: I’ve built a *very* shiny button 🫳🪩
0:23
AW

Alex Widua

@alexwiduaInteraction

Likes:69.3K
Post by Alex Widua: Prototyped a little app that allows you to take frames from @figma and 'pull them into space'.

The frames stay linked t
0:24
AW

Alex Widua

@alexwiduaInteraction

Likes:12.5K
Post by lochie: It's time to bring Haptics to the web 🫨
Create custom tactile patterns with strengths + durations for your web interact
0:26
LO

lochie

@lochieaxonInteraction

Likes:9.3K
Post by tldraw: (can't believe this works)
GIF
TL

tldraw

@tldrawInteraction

Likes:7.4K