545 - Magnetic Links - vanilla

[jsartisan]

styles.css

*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  background: light-dark(#fff, #000);
  display: flex;
  place-items: center;
  justify-content: center;
  min-height: 100svh;
  font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
    Helvetica, Arial, sans-serif, system-ui;
  margin: 0;
  padding: 0.5rem;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  flex-wrap: wrap;
  color: color-mix(in lch, canvasText 50%, canvas);
  transition: color 0.2s;
  touch-action: none;
}

ul:has(a:is(:focus-visible, :hover)) {
  --hovered: 1;
}

ul::before {
  --transition: 0.18s;
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: var(--hovered, 0);
  z-index: -1;
  border-radius: 6px;
  background: color-mix(in lch, canvasText, canvas 85%);
  transition: top var(--transition), left var(--transition),
    height var(--transition), opacity var(--transition), color var(--transition),
    width var(--transition);
  transition-timing-function: ease;
}

li {
  display: grid;
  place-items: center;
  font-weight: 400;
}

li a {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  width: 100%;
  height: 100%;
  color: currentColor;
  text-decoration: none;
}


@supports (anchor-name: --a) {
  li:has(a:is(:hover, :focus-visible)) {
    anchor-name: --anchor;
  }

  ul::before {
    position-anchor: --anchor;
    left: anchor(left);
    top: anchor(top);
    width: anchor-size(width);
    height: anchor-size(height);
  }
}