TGViewer
WebDev+ | Веб-разработка WebDev+ | Веб-разработка @webdev_plus · 7.9K subscribers
Post #969 1.12K
Прогрессивные CSS-индикаторы пагинации без JS c anchor positioning

nav::before { position-anchor: --h; }
nav::before { left: anchor(left); }
a:hover { anchor-name: --h; }


Идея такая: наводишься на ссылку, у неё появляется якорное имя --h, а nav::before привязывается к этому якорю через position-anchor и выравнивается по left: anchor(left). Для разметки используй псевдоэлементы самого nav: ::before — для индикатора наведения (intent), ::after — для индикатора текущей страницы (current).

@WebDev_Plus
More from @webdev_plus
  1. Oct 10, 2026Chrome DevTools – это не только панель для отладки, но и полноценная среда для проектирова…
  2. Oct 10, 2026Обрати внимание, что в корректном примере чипы мгновенно перемещаются на новую позицию, ко…
  3. Oct 9, 2026Принёс находку: sshx. Всего одна команда, и у вас в браузере открывается реплика локальног…
  4. Oct 9, 2026Огромная коллекцию из 1500+ отобранных API для ваших проектов, от погоды и карт до генерат…
  5. Oct 8, 2026Набор полезных пользовательских CSS-функций, который работает на новой нативной директиве…
  6. Oct 8, 2026Как работают очереди в контексте HTTP-запросов Разбираются основные стратегии очередей: FI…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →