CSS/Selektoren/scroll-marker

Der ::scroll-marker-Selektor lässt den Browser Pseudoelemente erzeugen, die als Navigations­elemente den Zugriff auf Inhalte für jedes angeforderte Element im Bildlaufbereich erleichtern.

Bis jetzt musste so etwas aus einer Reihe von a-Elementen von Hand nachgebaut werden.

Syntax	::scroll-marker { }
Browsersupport	Details: caniuse.com

Beispiel

li::scroll-marker {
  content: "";
  border: thin solid red;
  border-radius: 50%;
  height: 1em;
  width: 1em;
}
::scroll-marker:target-current {
  background: red;
}
li {
  counter-increment: markers;
}

Mit li::scroll-marker werden Pseudoelemente erzeugt, die mit Maus oder Tab-Taste angesteuert werden können. Dann greift der target-current-Selektor und färbt auch den Hintergrund rot.

Siehe auch

• OnePager
  • Komfort-Version

Weblinks

• W3C: Scroll marker Pseudo CSS Overflow Module Level 5
• MDN: ::scroll-marker
• MDN: CSS Carousels
• Carousels with CSS Adam Argyle, 20.03.2025 (developer.chrome.com)