::scroll-marker
A new experimental pseudo-element that represents an individual navigation dot in a carousel. You can style these dots (like an active/inactive state) directly in CSS.
This is an experimental technology. The syntax and behavior are still subject to change.
Syntax
/* Usage Example */
.carousel-item::scroll-marker {
content: ';';
width: 12px;
height: 12px;
background: #ccc;
border-radius: 50%;
}
.carousel-item::scroll-marker:checked{
background: var(--brand);
}::scroll-marker Browser support
Limited availability
Since
2020 69% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
135+
135+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more