アンカー配置で「吸い付く」ホバーインジケーター

どんな時に使う？

ベントーグリッドやタブ、ナビゲーションで、ホバーした項目へハイライト枠がスッと移動する演出を JS なしで作りたいとき。

コード

.bento {
  /* ホバーした項目だけがアンカーになる */
  li:hover article {
    anchor-name: --a;
  }

  .indicator {
    position: absolute;
    position-anchor: --a;
    inset: anchor(inside);   /* アンカーの四辺にぴったり合わせる */
    transition: inset var(--dur, 0.3s) var(--ease, ease-out);
  }
}

• アンカー名が別の要素に移ると、インジケーターの inset が変わり、transition で滑らかに移動する。

注意点・対応状況

• CSS Anchor Positioning 対応ブラウザが必要（Chromium 系先行）。未対応ではインジケーターを非表示にするなどの @supports (anchor-name: --a) 分岐を推奨。
• ホバーが外れたときの挙動（最後の位置に残す／消す）は別途設計する。

出典

• @jh3yy · 2026-10-02