css:`target-before and :target-after 和 scroll-target-group`

:target-before / :target-current / :target-after 与 scroll-target-group 的组合用法。
这些特性目前（截至 2025）在 Chrome Canary、Safari TP 等新版本浏览器中才开始支持

1. scroll-target-group: auto;

这行代码是新 CSS 的关键：

.nav {
scroll-target-group: auto;
}

它的作用是：

把一组锚点（a[href=“#id”]）注册成“滚动目标组”。

换句话说：

浏览器会自动识别这些链接对应的目标（例如 #slide-1 对应 .slide#slide-1）。

当用户滚动时，浏览器会跟踪哪个目标元素是“当前可见的”（in view），哪些在它之前或之后。

这为 :target-before / :target-current / :target-after 提供了数据来源

2. :target-before / :target-current / :target-after

这三个伪类是新的 “滚动状态选择器”，用来根据滚动位置对链接样式化。

在这个例子中：

a:target-current {background-color: black; /* 当前 slide 的导航点 */
}
a:target-before {background-color: lavender; /* 已经滑过的 slide 导航点 */
}
a:target-after {outline: 1px solid gray; /* 尚未滑到的 slide 导航点 */
}

含义：

:target-before：对应的 section 已经在滚动视图的前面（用户已经滚过）。

:target-current：对应的 section 当前在视口中（或是滚动位置聚焦的目标）。

:target-after：对应的 section 还在后面，尚未滚到。

机制如下：

.slides 是一个横向可滚动容器 (overflow-x: auto; scroll-snap-type: x mandatory;)

每个 .slide 都有一个唯一的 ID，比如 #slide-1

.nav a 链接对应这些 ID

通过 scroll-target-group: auto，浏览器自动把 .nav a 和 .slide 对应起来。

当用户滚动时，浏览器计算出哪个 slide 当前“被选中”，并动态为对应的 添加伪类状态（:target-before, :target-current, :target-after）。

整个过程 无 JS 参与。

See the Pen :target-before and :target-after with scroll-target-group by liu874396180 ( @liu874396180) on CodePen.